Jquery removeClass / addClass不起作用

时间:2015-03-17 12:59:42

标签: jquery addclass removeclass

如果已经有类,我需要在点击时向元素添加类并将其删除。如果我删除“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

3 个答案:

答案 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包装。