0

ボックスにスライドダウン効果をトリガーする設定ボタンがあるボックスを使用して Web サイトを構築しています。

コードをより複雑で短くするために、ボタンとスライドダウンボックスは、id ではなく、クラスごとに生成する必要があります (現在のように)。

最終的にはいくつかのボタン (btn1、btn 2、btn3 など) とボックス (box1、box2、box3 など) になるため、jQuery コードを短くするために、すべてのボタンをトリガーするのではなく、各ボタンを個別にトリガーする全体的なコードが必要です。同時に。ユーザーがウィジェットを追加できるPHPを計画しているため、クラスによってトリガーされる必要があります。

ここに私の例があります: http://www.danieldoktor.dk/test/test.html

私のコードはこれです：

HTML

<div class="lists">
        <header class="box_header" id="box1">
            <h1>HEADER 1</h1>
            <div class="setting" id="btn1"></div>
            </header>
 </div>

 <div class="lists">
        <header class="box_header" id="box2">
            <h1>HEADER 2</h1>
            <div class="setting" id="btn2"></div>
            </header>
 </div>

jQuery

// widget 1

  $("#btn1").click(function () { 
    if(!$("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }

}); 


$(document).click(function() {
    if($("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});

$("#box1").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
           // This should not be used unless you do not want
                         // any click events registering inside the div
});



 // widget 2

  $("#btn2").click(function () { 
    if(!$("#box2").hasClass('header-down')){
        $("#box2").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $("#box2").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }

}); 


$(document).click(function() {
    if($("#box2").hasClass('header-down')){
        $("#box2").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});

$("#box2").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
           // This should not be used unless you do not want
                         // any click events registering inside the div
});

ID ではなくクラスを使用して全体的なスクリプトを作成し、各クラスを一意の ID として制御するにはどうすればよいでしょうか? 私が欲しいものを説明するこのpsydoクラスを参照してください：

// widget overall

      $(".someBtnClass").click(function () { 
        if(!$(".someBoxClass").hasClass('header-down')){
            $(".someBoxClass").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
        }
        else{
            $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
        }

    }); 


    $(document).click(function() {
        if($(".someBoxClass").hasClass('header-down')){
            $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }
    });

    $(".someBoxClass").click(function(e) {
        e.stopPropagation(); // This is the preferred method.
               // This should not be used unless you do not want
                             // any click events registering inside the div
    });
4

1 に答える 1

2

jQuery.each http://api.jquery.com/jQuery.each/を確認してください

クラスをセレクターとして使用して、各ボタンのクリックイベントをバインドできます

$(".some-class").each(function(){
    $(this).on("click", function(){});
});

トリックは、jQueryが関数の内部が DOM ノードである.each()ことを確認することです。this

于 2013-02-26T08:30:56.487 に答える