Question

我刚用控制器做了一个计时器，但在控制按钮上我需要一些帮助。

最初有一个带START值的按钮。必须将类和值更改为第一次单击的“停止”，第二次单击更改类和＆amp;价值“恢复”。

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

第一次点击。 <input class="stop" type="button" value="STOP" />

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

第三次点击。 <input class="stop" type="button" value="STOP" />

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

你能帮助我吗？原谅我糟糕的英语。

仅供参考：我正在使用JQUERY MOBILE。

Answer 1

我没有在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/

希望有所帮助

P.S。请在jquery中为您的按钮添加特定的选择器。

Answer 2

您的初始值'start'与此无关，因为它只是第一次出现。所以一个更简单的解决方案是：

$(':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

更改每次单击的按钮类和值

2 个答案: