jQuery Переключая кнопку Видимость на клике

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

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

это один скроет кнопку, пока он получает идентификатор, он будет выбрать стоп идентификатор, если текущий атрибут идентификатор запуска и наоборот. он использует скрыть и показать, но вы могли бы заменить в addClass («скрыть») и т.д.

Answer 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(); 

});​ 

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/

EDIT: Сделано это еще больше consise с $(this).hide().

Отсутствие хитрости, тройников никсонов или дублирование в обработчиках. Просто приятно и просто.