Jquery removeClass/addClass 无效

Question

我需要在点击元素时添加 class 并删除它，如果已经有 class。如果我删除 "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

Answer 1

使用

$(this).removeClass('lselected');

您需要在 removeClass() 中指定 class 名称。

就像@josh Crozier 说的，你可以这样减少代码，

$(".tagy li").click(function() {
    $(this).find(":input").click();

    $(this).toggleClass('lselected');

});

Answer 2

哈哈！在我看来，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
    });

因为您的输入元素是 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>

Answer 3

这是修复代码的方法：

$(".tagy li").click(function (e) {
    $(this).toggleClass('lselected')
           .find(':checkbox')
           .prop('checked', $(this).hasClass('lselected'));
});

但请注意，您的 HTML 标记无效，LI 不能是 DIV 元素的直接子元素，必须包含在 UL 中。

Jquery removeClass/addClass 无效

Jquery removeClass/addClass is not working

jquery

addclass

removeclass