Javascript 在jQuery中选择单独按钮的最有效方法？

我试图在同一行的三个段落上创建一个下拉效果，我想出了一个可行的解决方案，但是我觉得我必须打破编程中的“枯燥”规则。有没有更快、更有效的方法

$(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');

        });

});

---

更好的方法是不要使用

eq

选择器，假设按钮旁边有

p

，则可以执行以下操作：

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

---

---

或者采取与我在本答案后面部分中描述的方法类似的方法：。

您可以从0-2迭代

I

，并附加

。btn:eq（I）

到

p:eq（I）

。（这只是一个基本的想法，但这可能是我要做的。）这是对标记的一个假设，这不一定是真的。@MattBall是的，这是真的，这就是为什么我使用

假设

，我的观点是当你可以用其他方法，然后不要使用

eq

选择器。

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

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