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節點。