我正在构建一个带有框的网站,该网站有一个设置按钮,可以触发框上的向下滑动效果。
按钮和向下滑动框必须分别由一个类生成,而不是一个 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
});
最佳答案
检查 jQuery.each http://api.jquery.com/jQuery.each/
您可以使用类作为选择器在每个按钮上绑定(bind)点击事件
$(".some-class").each(function(){
$(this).on("click", function(){});
});
诀窍在于 jQuery .each()
将确保函数内部的 this
是 DOM 节点。
关于Jquery - 如何区分具有相同类的多个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15084362/