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

更好的方法是不使用eq选择器，假设p位于按钮旁边，那么您可以执行以下操作：

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

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

2 个答案: