0

我正在构建一个带有框的网站，该框有一个设置按钮，可以触发框上的向下滑动效果。

按钮和向下滑动框必须由一个类生成，而不是一个 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.each()将确保this函数内部是 DOM 节点。

于 2013-02-26T08:30:56.487 回答