2

クリック イベントで 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 の場合は stop id を選択し、その逆も同様です。非表示と表示を使用しますが、 addClass('hide') などで置き換えることができます

于 2012-06-09T01:58:39.060 に答える