Изменить класс кнопки и значение для каждого щелчка

Я только что сделал таймер с контролем, но в кнопке управления мне нужна помощь.Изменить класс кнопки и значение для каждого щелчка

Первоначально там есть кнопка со значением START. необходимо изменить класс и значение на «STOP» для первого клика, а для второго щелчка измените значение класса & на «RESUME».

ПО УМОЛЧАНИЮ. <input class="start" type="button" value="START" />

1-й клик. <input class="stop" type="button" value="STOP" />

2-й клик. <input class="resume" type="button" value="RESUME" />

3-й клик. <input class="stop" type="button" value="STOP" />

4-й клик. <input class="resume" type="button" value="RESUME" />

Помогите мне в этом? и простить мой плохой английский.

FYI: Я использую JQUERY MOBILE.

источник

2013-10-06 Umar

Я не работал в JQuery мобильного телефона, но это должно быть так, как

JQuery

$(document).ready(function(){ 
    $('input').click(function(){ 
     if($(this).hasClass("start")){ 
      $(this).removeClass("start"); 
      $(this).addClass("stop"); 
      $(this).val("STOP"); 
     }else if($(this).hasClass("resume")){ 
      $(this).removeClass("resume"); 
      $(this).addClass("stop"); 
      $(this).val("STOP"); 
     }else if($(this).hasClass("stop")){ 
      $(this).removeClass("stop"); 
      $(this).addClass("resume"); 
      $(this).val("RESUME"); 
     } 
    }); 
})

для справки http://jsfiddle.net/zGMWR/1/

надеюсь, что это помогает

P.S. поставьте конкретный селектор в jquery для вашей кнопки.

источник

2013-10-06 11:03:40 PSK

Работает отлично. Большое спасибо :) :) – Umar

рад, я мог бы помочь :) – PSK

@PSK Ваш код отлично работает, и он отлично работает, вы можете подумать, хотя пишите более эффективно и разбиваете логику на то, что актуально. Размер имеет значение; o) – jsmorph

Ваше начальное значение «начало» здесь не имеет значения, поскольку оно появляется только в первый раз. Таким образом, простое решение будет:

$(':button').on('click', function(){ 
    $(this).removeClass('start stop resume'); 
    if (this.value !== 'STOP') { 
     this.value = 'STOP'; 
     $(this).addClass('stop'); 
    } else { 
     this.value = 'RESUME'; 
     $(this).addClass('resume'); 
    } 
});

Еще более короткая версия будет:

$(':button').on('click', function(){ 
    this.value = this.value !== 'STOP' ? 'STOP' : 'RESUME'; 
    $(this).removeClass('start stop resume') 
      .addClass(this.value.toLowerCase()); 
});

Side информация: ответ от ФМн: 376 байт; первый ответ здесь: 223 байта; второй ответ: 174 Bytes

Конечно, вы можете обернуть его в $(document).ready(function(){ функции при необходимости

См http://jsfiddle.net/zGMWR/2/ и http://jsfiddle.net/zGMWR/3/, как это работает

Для более конкретного селектора и с помощью делегирования событий вы можете использовать:

$('form').on('click', ':button', function(){...

или дайте кнопку еще конкретнее имя класса, такие как play-button

источник

2013-10-06 11:09:08 jsmorph

Изменить класс кнопки и значение для каждого щелчка

ответ

Смежные вопросы