1

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

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

默认。 <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。

4

2 回答 2

2

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

希望能帮助到你

PS请在jquery中为您的按钮放置特定的选择器。

于 2013-10-06T11:03:40.480 回答
2

您的初始值“开始”在这里无关紧要，因为它只在第一次出现。所以一个更简单的解决方案是：

$(':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-06T11:09:08.397 回答