jquery - 有没有比为 3 个相同的动作重复 3 次函数更简洁的方法？

Question

基本上我正在做类似的事情：

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 并将它们全部列出在一个函数中，但是它们都一起消失了，这不是我想要的。谢谢

Answer 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');
    });
 });

Answer 2

从父容器委托事件 click ，并通过 click 目标标签上的 data 属性检索要显示的元素的 id 。

类似的东西：

$('.btn-container').on('click', '.btn', function(e){
  var $toReveal = $("#" + $(this).data('reveal-id'))
  $(this).fadeOut('slow',function(){
    $toReveal.fadeIn('slow')
  });
})

Answer 3

我相信您可以使用一个事件处理程序拥有多个按钮。然后只需获取发件人：

$(function() { 

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

    }); 
});