jQuery에서 가장 효율적인 버튼을 선택하는 가장 효율적인 방법은 무엇입니까?

Question

동일한 줄의 세 단락에 드롭 다운 효과를 만들려고 노력하고 있지만 작동하는 솔루션을 생각해 냈습니다. 그러나 여기에서 프로그래밍의 "DRY"규칙을 위반해야한다는 느낌이 들었습니다. 이 작업을보다 빠르고 효율적으로 수행 할 수있는 방법이 있습니까?

$(function(){ 

     var btn1 = $('.span4 .btn:eq(0)'); 
     var btn2 = $('.span4 .btn:eq(1)'); 
     var btn3 = $('.span4 .btn:eq(2)'); 
     var p1 = $('.span4 p:eq(0)'); 
     var p2 = $('.span4 p:eq(1)'); 
     var p3 = $('.span4 p:eq(2)'); 

     btn1.click(function(){ 

      p1.slideToggle('slow'); 

     }); 

     btn2.click(function(){ 

      p2.slideToggle('slow'); 

     }); 

     btn3.click(function(){ 

      p3.slideToggle('slow'); 

     }); 

}); 

Answer 1

$(function(){ 
    var buttons = $('.span4 .btn'); 
    var paragraphs = $('.span4 p'); 

    $('.span4').on('click', '.btn', function() { 
     paragraphs.eq(buttons.index(this)).slideToggle(); 
    }); 
}); 

http://api.jquery.com/index
http://api.jquery.com/eq

---

또는이 대답의 뒷 부분에서 설명한 것과 비슷한 접근법을 사용하십시오 : https://stackoverflow.com/a/12803518/139010.

Answer 2

p 가정, eq 선택기를 사용하지 않는 더 나은 방법은 버튼 옆에, 당신은 아래와 같이 할 수있다 :

$(function() { 
    $('.span4 .btn').click(funciton() { 
    $(this).next('p').slideToggle('slow'); 
    }); 
});