如果已经有类,我需要在点击时向元素添加类并将其删除。如果我删除“removeClass”行,“addClass”正常工作。
$(".tagy li").click(function() {
$(this).find(":input").click();
$(this).toggleClass('lselected');
});
你能帮助我吗,我做错了什么?谢谢,
米甲
如果我通过输入点击删除行,toggleClass正常工作,但我需要保留它。测试:http://mbehal.cz/trat238/test/nggallery/thumbnails?f39=1&f50=1&submit=Filtrovat#1870-1920
答案 0 :(得分:5)
使用
$(this).removeClass('lselected');
您需要在removeClass()中指定类名。
像@josh一样,Crozier说,你可以减少这样的代码,
$(".tagy li").click(function() {
$(this).find(":input").click();
$(this).toggleClass('lselected');
});
答案 1 :(得分:1)
哈哈!在我看来,使用event.stopPropagation()
:
$(".tagy li").click(function() {
$(this).find(":input").focus(); // may be you want to focus in the input
$(this).toggleClass('lselected');
});
$(".tagy li").find(':input').on('click focus', function(e) {
e.stopPropagation(); // stop the event to bubble up
});
因为您的input元素是li
的子元素,并且任何事件都会发生在子元素上,这些元素会冒泡到父元素。这就是造成这个问题的原因。为此,您需要使用event.stopPropagation()
停止活动。
$(".tagy li").click(function() {
$(this).find(":input").focus();
$(this).toggleClass('lselected');
});
$(".tagy li").find(':input').on('click focus', function(e) {
e.stopPropagation(); // stop the event to bubble up
});
.lselected {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='tagy'>
<li>aasdfasfd
<input type='text' />
</li>
</ul>
答案 2 :(得分:1)
这是您修改代码的方法:
$(".tagy li").click(function (e) {
$(this).toggleClass('lselected')
.find(':checkbox')
.prop('checked', $(this).hasClass('lselected'));
});
但要注意,你的HTML标记不是有效的,LI不能是DIV元素的直接子元素,必须用UL包装。