2

我希望在单击事件的两个按钮之间“循环”。这很简单，但我想知道是否有比我下面的更简洁的方法来实现它。 

$('button#start').click( function() {

    $(this).addClass('hide');
    $('button#stop').removeClass('hide');

});

$('button#stop').click( function() {

    $(this).addClass('hide');
    $('button#start').removeClass('hide');

});
4

3 回答 3

2

另一个简单的演示 http://jsfiddle.net/S4d6j/

好读：可见选择器：http ://api.jquery.com/visible-selector/

您可以使用.is(":visible")来检查哪个是可见的并隐藏另一个，我们可以链接两个按钮。

希望能帮助到你

代码

$('#start,#stop').click(function() {

    if ((this.value === "start") && $(this).is(":visible")) {        
        $("#stop").show();
    } else if ((this.value === "stop") && $(this).is(":visible")) {
        $("#start").show();
    }

    $(this).hide();

});​
于 2012-06-09T02:04:20.100 回答
1

这让我很烦恼，我没有缓存它$(this)，但这不是必需的，在我看来也不会带来任何实现的性能提升。但是，我想这将尽可能短：

$('#start, #stop').click(function(){
    $(this).hide();
    $(this).siblings('button').show();
});

http://jsfiddle.net/userdude/S4d6j/1/

所以，这取决于你的 DOM 结构和元素的位置。另一种方法可能是仅用于this.id确定单击了哪个，然后相应地切换值：

$('#start, #stop').click(function(){
    var buttons = {start: 'stop', stop: 'start'};

    $(this).hide();
    $('#' + buttons[this.id]).show();
});

http://jsfiddle.net/userdude/S4d6j/3/

编辑：使它更加简洁$(this).hide()。

处理程序中没有任何技巧、尼克松三元组或重复。很好很简单。

于 2012-06-09T02:21:09.067 回答
1 
$('button').click(function(e){
    $(  
         $(this).addClass('hide').attr('id') == 'start' 
              ? '#stop' 
              : '#start'
    ).removeClass('hide');
});

这将在获取 id 时隐藏按钮，如果当前 id 属性为 start，它将选择停止 id，反之亦然。它使用隐藏和显示，但您可以替换为 addClass('hide') 等

于 2012-06-09T01:58:39.060 回答