我试图将类似元素的jQuery单击事件组合在一起。基本上,当单击一个特定的按钮时,我有一个主div要添加新的类。所以我有
<div class="main"></div>
我想在div中添加新的类,这取决于我有几个按钮
<div class="triggers">
<div class="changer" id="blue">Blue</div>
<div class="changer" id="red">Red</div>
<div class="changer" id="green">Green</div>
</div>
所以我用CSS创建了类,然后根据每个被点击的按钮ID将它们添加到主div中
$(document).ready(function(){
$('#blue').click(function() {
$(".main").addClass("blue").delay(500).queue(function(){
$(this).removeClass("blue").dequeue();
});
});
$('#red').click(function() {
$(".main").addClass("red").delay(500).queue(function(){
$(this).removeClass("red").dequeue();
});
});
$('#green').click(function() {
$(".main").addClass("green").delay(500).queue(function(){
$(this).removeClass("green").dequeue();
});
});
});
我的问题是如何将这些单击事件分组在一起,这样就不会根据每个按钮的ID一遍又一遍地重复同一个代码块了?
最佳答案
在公共类上注册click事件,然后获取哪个颜色的id?
$(".changer").click(function() {
let colour = String($(this).attr("id"));
if (colour) {
$(".main").addClass(colour).delay(500).queue(function(){
$(this).removeClass(colour).dequeue();
});
}
})
关于javascript - 将相似的jquery点击事件分组在一起,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56566104/