1

同じ行の 3 つの段落にドロップダウン効果を作成しようとしていますが、機能する解決策を思いつきましたが、ここでプログラミングの「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');

        });

});
4

2 に答える 2

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

于 2012-10-23T03:03:00.577 に答える
1

より良い方法はeq、セレクターを使用しないことです。セレクターがボタンの隣にあると仮定すると、p以下のようにすることができます。

$(function() {
  $('.span4 .btn').click(funciton() {
    $(this).next('p').slideToggle('slow');
  });
});
于 2012-10-23T03:02:02.970 に答える