添加和删除类不工作

Adding and removing classes not working

本文关键字：工作 删除 添加      更新时间：2023-09-26

我在另一个div元素上使用了相同的代码，它工作得很好。当我将相同的代码添加到另一个具有不同id的div元素时，它会注册元素已被单击，但它不会添加或删除任何类。

$('#quoteClick').click(function(){
    $('#cbox-1').addClass('displayCboxBackground');
    $('#cbox-2').removeClass('displayCboxBackground');
    $('#cbox-3').removeClass('displayCboxBackground');
    $('#dbox-1').addClass('displayBlock');
    $('#dbox-2').removeClass('displayBlock');
    $('#dbox-3').removeClass('displayBlock');
    console.log("clicked");
});

html的结构如下:

<div id="cbox-1">
    <div id="dbox-1">
         content...
    </div>
</div>    
<div id="cbox-2">
    <div id="dbox-2">
         content...
    </div>
</div>
<div id="cbox-3">
    <div id="dbox-3">
         <div id="quoteClick">
             a quote
         </div>
    </div>
</div>

JSFiddle: https://jsfiddle.net/m81c23cx/1/

在页面中，您可以看到当单击每个标题时内容将发生变化。当"quoteClick"元素被点击时，我想让它变成第二个标题的内容，就像第二个标题被点击时一样。

我可以看到在Chrome的控制台，当我点击div元素，它突出显示所有的类，但它不改变他们中的任何一个。我有一个document.ready()函数内的jQuery，所以它应该等待DOM加载，它工作完美，当我只是写到控制台的行。

我很惊讶居然没有人质疑您对id的使用(而不是建议您应该仔细检查是否存在欺骗)。这段代码难以调试的原因是因为它太复杂了。因此，您将很难在未来修复类似的问题。

放下它，做得更好。我还没看你的小提琴呢。相反，我建议你彻底改变你的方法。

更新你的HTML并使用类而不是id。类似这样:

<div class="cbox">
    <div class="dbox">
         content...
    </div>
</div>    
<div class="cbox">
    <div class="dbox">
         content...
    </div>
</div>
<div class="cbox">
    <div class="dbox">
         <div id="quoteAdvert">
             a quote
         </div>
    </div>
</div>

更新你的JavaScript并使用this来获取当前框的上下文:

$('.cbox').click( function cboxClicked () {
  // Remove the previous class from all .cbox & .dbox elements; we don't care which
  $('.cbox').removeClass('displayCboxBackground') 
  $('.dbox').removeClass('displayBlock')
  // Add a new class to the clicked .cbox & it's child .dbox
  $(this).addClass('displayCboxBackground')
  $(this).children('.dbox').addClass('displayBlock')
})

这有什么美妙之处?你可以有1000个盒子，它仍然有效。不需要添加任何额外的代码行。

您提供的示例代码与您创建的jsfile不一致。

在您的小提琴中，您使用jquery选择器$('#quoteClick')，但没有该id的元素。但是有一个#quoteAdvert元素。更改它，您将在控制台中看到点击。

classList属性返回所讨论元素的class属性的令牌列表。幸运的是，它还提供了一些方便的方法:

  • add -添加一个类
  • remove -删除一个类
  • toggle -切换类

  • contains -检查类是否存在

    //添加类"foo"到elel.classList.add("foo");

    //从el中移除类"bar"el.classList.remove("酒吧");

    //切换类fooel.classList.toggle("foo");

    //如果el包含"foo"，输出"true"到控制台，如果不包含"false"console.log(el.classList.contains("foo"));

    //添加多个类到elel.classList。add("foo"， "bar");

相关文章：