Question

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

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

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

});

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

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

});

Answer 1

另一个简单的演示 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();

});

Answer 2

$('button').click(function(e){
    $(  
         $(this).addClass('hide').attr('id') == 'start' 
              ? '#stop' 
              : '#start'
    ).removeClass('hide');
});

这个会在获取id时隐藏按钮，如果当前id属性是start，它将选择stop id，反之亦然。它使用hide和show但你可以在addClass（'hide'）等中替换

Answer 3

这让我感到烦恼，我没有缓存$(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()更加明智。

没有棘手，尼克松三元，或处理程序中的重复。简单又好又简单。

单击时jQuery切换按钮可见性

3 个答案: