更改每次點擊的按鈕類別和值

我只是做了一個控制計時器，但在控制按鈕我需要一些幫助。更改每次點擊的按鈕類別和值

最初有一個帶有START值的按鈕。必須將類和值更改爲「停止」第1次點擊和第2次點擊將類&值更改爲「恢復」。

默認。 <input class="start" type="button" value="START" />

1st click。 <input class="stop" type="button" value="STOP" />

第二次點擊。 <input class="resume" type="button" value="RESUME" />

第3次點擊。 <input class="stop" type="button" value="STOP" />

第4次點擊。 <input class="resume" type="button" value="RESUME" />

你能幫我嗎？並原諒我英語不好。

僅供參考：我正在使用JQUERY MOBILE。

來源

2013-10-06 Umar

我沒有在jQuery Mobile的工作，但這個應該是這樣

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/

希望它有助於

附：請將特定的選擇器放入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()); 
});

端資訊：從PSK答案：376字節;第一個答案在這裏：223字節;第二個答案：174個字節

當然你也可以根據需要將它包裝在一個$(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

更改每次點擊的按鈕類別和值

回答

相關問題