Question

我有一个html包含一个带有列表的div元素，

<div id='tree'>
<ul>
<li id='1' class='folder expand'>1</li>
<li id='2'>2</li>
<li id='3' >3</li>
<li id='4'>4</li>
</ul>
</div>

我需要找到

1.如果li元素有'class'类？

$('#tree li').live('click',function() {
    if($(this).hasClass('folder')){
      if($(this).hasClass('expand')){
        $(this).removeClass('expand').addClass('cl');
        }
      else{
        $(this).removeClass('cl').addClass('expand');
        }
            }
}

此代码不起作用。它总是进入其他条件。

2.在上面我想用'collapse'覆盖类'expand'。如何仅删除匹配类的名称？

Answer 1

该代码似乎没有错，它应该按照给定的方式工作。但是，如果您只打算切换它们，则无需查看哪些类。以上所有内容都可以简化为

$('#tree li.folder').live('click',function() {
    $(this).toggleClass("expand cl");
});

此外，由于live已被弃用（事实上完全删除在jQuery 1.9中），因此上述内容应使用on编写：

$('#tree').on('click', 'li.folder', function() {
    $(this).toggleClass("expand cl");
});

Answer 2

我认为您的代码没有任何问题。您应该将“实时”监听器更改为“on”，因为“live”已被弃用。

这是决策树的工作版本，其中包含警报，可帮助您找到自己的位置

$(document).on('click', '#tree li', function(){
    if($(this).hasClass('folder')){
      if($(this).hasClass('expand')){
        $(this).removeClass('expand').addClass('cl');
        alert("i have folder and expand classes");
      }
      else{
        $(this).addClass('expand');
          alert("i have folder, but not expand classes");
      }
    }
    else{
        alert("I have no folder class");
    }
});

Fiddle here

Jquery如何在将多个类分配给id时覆盖/删除特定类

2 个答案: