所以我现在正在学习一些jQuery,并且有点坚持使用这个.click函数。我试图“打开和关闭灯”,可以这么说。 我能够这样做,但只有一次。为什么这样,我的代码只运行每个项目的一次点击事件,我应该如何改进它?
链接到我的JSfiddle。
HTML
<div class="lightOn"></div>
<div class="lightOff"></div>
的jQuery
$('.lightOn').click(function() {
$(this).removeClass('lightOn');
$(this).addClass('lightOff');
});
$('.lightOff').click(function() {
$(this).removeClass('lightOff');
$(this).addClass('lightOn');
});
CSS
.lightOn {
height: 90px;
width:90px;
background-color:yellow;
border-radius: 100%;
float:left;
margin:10px;
}
.lightOff {
height: 90px;
width:90px;
background-color:grey;
border-radius: 100%;
float:left;
margin:10px;
}
答案 0 :(得分:7)
问题是因为您要删除所选择的类,因此对于连续单击,该元素不再存在。而是保留了一个共同的class
,但添加一个以点亮该对象。试试这个:
<div class="light"></div>
<div class="light"></div>
.light.on {
background-color:yellow;
}
.light {
height: 90px;
width:90px;
background-color:grey;
border-radius: 100%;
float:left;
margin:10px;
}
$('.light').click(function() {
$(this).toggleClass('on');
});
此方法的好处是能够处理x
个.light
个元素,而无需修改您使用的jQuery选择器。
答案 1 :(得分:4)
问题在于您将函数绑定到元素,而不是绑定到选择器。也就是说,绑定一个将类lightOn
移除到最初具有该类的元素的函数。该函数只删除lightOn
类并添加lightOff
类,即使已经执行过一次。
有两种方法可以解决这个问题。一个是on
和事件委托,它允许你做一些类似于绑定到选择器的事情。它将处理程序附加到父元素,并利用所有祖先元素被通知源自其后代的事件的事实。因此函数可能绑定到document.body
,但只有源自匹配.lightOn
选择器的元素的元素才会触发处理程序:
$(document.body).on('click', '.lightOn', function() {
$(this).removeClass('lightOn').addClass('lightOff');
}).on('click', '.lightOff', function() {
$(this).removeClass('lightOff').addClass('lightOn');
});
http://jsfiddle.net/lonesomeday/C6f7u/5/
然而,更好的是使用jQuery的toggleClass
函数,如果元素当前具有它们,则删除类,如果它没有,则添加它们。
$('.lightOn,.lightOff').click(function() {
$(this).toggleClass('lightOn lightOff');
});
答案 2 :(得分:2)
怎么样?
$('.lightOn, .lightOff').click(function() {
$(this).toggleClass('lightOn lightOff');
});
演示:Fiddle
答案 3 :(得分:1)
您可以尝试使用toclass of jquery http://api.jquery.com/toggleClass/
答案 4 :(得分:0)
将事件附加到父元素是一种很好的做法。在您的情况下,这甚至是强制性的,因为您正在更改在事件绑定期间使用的类。那么,你的HTML:
<div class="ligths">
<div class="lightOn"></div>
<div class="lightOff"></div>
</div>
JS:
$(".ligths").on("click", "div", function(e) {
var el = $(this);
if(el.hasClass("lightOn")) {
el.removeClass("lightOn").addClass("lightOff");
} else {
el.removeClass("lightOff").addClass("lightOn");
}
});
JSFiddle:http://jsfiddle.net/C6f7u/7/