Jquery - 如何区分具有相同类别的多个按钮

Question

我正在构建一个带有框的网站，其中有一个设置按钮，可以在框上触发滑动效果。

按钮和向下滑动框必须由每个类生成，而不是一个id（因为它是现在），以使我的代码更简单，更简单。

最终它会是几个按钮（btn1，btn 2，btn3等）和盒子（box1，box2，box3等），所以为了缩短我的jQuery代码我想要一个整体代码来单独触发每个按钮在同一时间触发他们。它需要由一个类触发，因为我正在计划一些PHP，用户将能够添加一个小部件。

这是我的例子：http://www.danieldoktor.dk/test/test.html

我的代码是这样的：

HTML

<div class="lists"> 
     <header class="box_header" id="box1"> 
      <h1>HEADER 1</h1> 
      <div class="setting" id="btn1"></div> 
      </header> 
</div> 

<div class="lists"> 
     <header class="box_header" id="box2"> 
      <h1>HEADER 2</h1> 
      <div class="setting" id="btn2"></div> 
      </header> 
</div> 

jQuery的

// widget 1 

    $("#btn1").click(function() { 
    if(!$("#box1").hasClass('header-down')){ 
     $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    } 
    else{ 
     $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down'); 
    } 

}); 


$(document).click(function() { 
    if($("#box1").hasClass('header-down')){ 
     $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down'); 
} 
}); 

$("#box1").click(function(e) { 
    e.stopPropagation(); // This is the preferred method. 
      // This should not be used unless you do not want 
         // any click events registering inside the div 
}); 



// widget 2 

    $("#btn2").click(function() { 
    if(!$("#box2").hasClass('header-down')){ 
     $("#box2").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    } 
    else{ 
     $("#box2").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down'); 
    } 

}); 


$(document).click(function() { 
    if($("#box2").hasClass('header-down')){ 
     $("#box2").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down'); 
} 
}); 

$("#box2").click(function(e) { 
    e.stopPropagation(); // This is the preferred method. 
      // This should not be used unless you do not want 
         // any click events registering inside the div 
}); 

你会如何做一个整体的脚本建立与类而不是ID的，仍然控制每个类作为唯一的ID？ 看到这个psydo类解释我想要什么：

// widget overall 

     $(".someBtnClass").click(function() { 
     if(!$(".someBoxClass").hasClass('header-down')){ 
      $(".someBoxClass").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
     } 
     else{ 
      $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down'); 
     } 

    }); 


    $(document).click(function() { 
     if($(".someBoxClass").hasClass('header-down')){ 
      $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down'); 
    } 
    }); 

    $(".someBoxClass").click(function(e) { 
     e.stopPropagation(); // This is the preferred method. 
       // This should not be used unless you do not want 
          // any click events registering inside the div 
    }); 

Answer 1

我已经想出了自己

Answer 2

检查jQuery.each http://api.jquery.com/jQuery.each/

您可以通过

$(".some-class").each(function(){ 
    $(this).on("click", function(){}); 
}); 

绑定使用类作为选择每个按钮的点击事件的诀窍是即jQuery .each()将确保this里面的函数是DOM节点。