-1

基本的に私はこれに似た何かをやっています：

http://jsfiddle.net/3XwZv/71/

これらの 3 つのインスタンスがあることを除いて、すべてのボタンに同じ機能が必要です。また、通常の状態に戻すための戻るボタン/リンクはありません。

したがって、関連する部分と次の jquery の一意の ID を使用して、各インスタンスにラベルを付けました。

    $('#btn0').click(function(e){    
            $('#btn0').fadeOut('slow', function(){
                $('#reveal0').fadeIn('slow');
            });
        });
        $('#btn1').click(function(e){    
            $('#btn1').fadeOut('slow', function(){
                $('#reveal1').fadeIn('slow');
            });
        });
        $('#btn2').click(function(e){    
            $('#btn2').fadeOut('slow', function(){
                $('#reveal2').fadeIn('slow');
            });
        });

この方法は少し不格好に思えますが、これを行うためのよりきちんとした構文があるかどうか迷っていましたか? 私は.eachを試して、それらをすべて1つの関数にリストしましたが、それらはすべて一緒に消えてしまい、これは私が望むものではありません. ありがとう

4

3 に答える 3

1

親コンテナーからイベント クリックを委任し、要素の ID を取得して、クリックの対象となるタグの data 属性を介して表示します。

そんな感じ ：

$('.btn-container').on('click', '.btn', function(e){
  var $toReveal = $("#" + $(this).data('reveal-id'))
  $(this).fadeOut('slow',function(){
    $toReveal.fadeIn('slow')
  });
})
于 2013-03-08T20:09:30.210 に答える
1 
$('#btn0, #btn1, #btn2').click(function(e){    
    $(this).fadeOut('slow', function(){
        $('#reveal' + this.id.replace('btn','')).fadeIn('slow');
    });
 });

クラスとデータ属性を使用する方が理にかなっています。

<button class="mybutton" data-reveal="reveal0">Foo</button>
<button class="mybutton" data-reveal="reveal1">Bar</button>

その後：

$('.myButton').on('click', function(){
    var $this = $(this);
    $this.fadeOut('slow', function(){
        $('#' + $this.data('reveal')).fadeIn('slow');
    });
 });
于 2013-03-08T20:03:11.013 に答える
0

1 つのイベント ハンドラーで複数のボタンを使用できると思います。次に、送信者を取得します。

$(function() { 

  $('#<%=btn1.ClientID %>, #<%=btn2.ClientID %>').click(function(event) { 
     var getBtnId= $(event.target).attr('id');
      'then just do some code specific to the button ID

    }); 
});
于 2013-03-08T20:05:33.577 に答える