javascript - 在 jQuery 中选择单独按钮的最有效方法是什么？

Question

我正在尝试在同一行的三个段落上创建下拉效果，并且我想出了一个可行的解决方案，但是我觉得我必须在这里打破编程的“干”规则。有没有更快、更有效的方法来做到这一点？

$(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

更好的方法是不使用eq选择器，假设p按钮旁边，那么你可以这样做：

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