0

По заданию нужно сделать чтобы при нажатии на кнопку "Start" она изменяла свою подпись на "Stop" и наоборот.
Пытался сделать так:

$(document).ready(function() {
  $('#start').click(function() {
    $(this).attr('id', 'stop');
    $(this).val('Stop');
  });
  $('#stop').click(function() {
    $(this).attr('id', 'stop');
    $(this).val('Stop');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="start" value="Start" />

Не работает.

Как можно реализовать?

3 ответа 3

3

var btn = document.querySelector('#start');

btn.addEventListener('click', function() {
  btn.value = (btn.value == 'Start' ? 'Stop' : 'Start');
})
<input type="button" id="start" value="Start" />

2
  • Спасибо! Можно будет таким же самым образом повесить на нее запуск определенного процесса?
    – Денис
    9 июн 2018 в 9:28
  • @Денис Конечно, добавить то что нужно после изменения названия кнопки. Не за что)
    – Kosta B.
    9 июн 2018 в 9:40
2

Если вы хотите менять только сообщение, то зачем же меняете еще и ID кнопки?

Наиболее простой и, вероятно, понятный для вас код будет таким

$("#start").click(function(){      
   var v = $(this).val();
   
   switch(v){
      case 'start': v = 'stop';  break;
      case 'stop':  v = 'start'; break;
   }
   
   $(this).val(v);      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="start" value="start"/>

Хотя, это возможны и более короткие варианты записи, приводящие к тому же эффекту.

$("#btn1").click(function(){
   var msgs = ['stop', 'start'];
   var v = $(this).val();
   $(this).val( msgs[ +(v == 'stop') ] );
});

$("#btn2").click(function(){
   var cfg = { stop: 'start', start: 'stop' };
   var v = $(this).val();
   $(this).val( cfg[v]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btn1" value="start"/>
<input type="button" id="btn2" value="start"/>

и прочие вариации, например, используя data-атрибуты

2
  • Спасибо! Кроме смены названия нужно будет сделать запуск определенного процесса, думал через id идентифицировать старт и стоп)
    – Денис
    9 июн 2018 в 9:30
  • для этого используют data- атрибуты
    – teran
    9 июн 2018 в 9:35
0

Вариант с созданием класса Toggle

function Toggle(values) {
  //сырой массив
  this.raw = values;
  //текущий индекс
  this.head = 0;
  //итератор
  this.iter = function() {
     this.head = (this.head < this.raw.length - 1) ? this.head + 1 : 0;
  }
  //получить текущее значение массива
  this.getCurrent = function () {
     return this.raw[this.head];
  }
}


window.onload = function () {
  
  //объявление
  var tog = new Toggle(["start","stop"]);
  //добавление элемента, это можно было сделать при инициалиации но здесь оно нужно для наглядности
  tog.raw.push("pause");
  
  
  var bind = document.getElementById("bind");
  bind.value = tog.getCurrent();
  bind.addEventListener("click", function() {
    //итерируемся
    tog.iter();
    bind.value = tog.getCurrent();
  });
}
<input type="submit" value="" id="bind">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.