Question

我在不同的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/

在小提琴中，您可以看到单击每个标题时内容会发生变化。当＆＃34; quoteClick＆＃34;单击元素我想让它更改为第二个标题内容，当它单击第二个标题时它的确切方式。

我可以在Chrome控制台中看到，当我点击div元素时，它突出显示了所有类，但它并没有改变它们中的任何一个。我在document.ready()函数中有jQuery，所以它应该等待DOM加载，当我将这些行写入控制台时，它可以正常工作。

Answer 1

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

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

Answer 2

我很惊讶没有人真正质疑你对ids的使用（而不是建议你应该仔细检查愚蠢）。这个代码难以调试的原因是因为它太复杂了。因此，您将来很难解决与此类似的问题。

放弃它，做得更好。我甚至没有通过你的小提琴。相反，我建议你改变你的方法。

更新您的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个盒子，它仍然可以使用。无需添加任何额外的代码行。

这是fiddle显示它的实际效果。

Answer 3

classList属性返回相关元素的class属性的标记列表。幸运的是，它还附带了一些方便的方法：

add - 添加一个类
删除 - 删除课程
切换 - 切换班级
包含 - 检查类是否存在

//将类“foo”添加到el el.classList.add（ “富”）;

//从el中移除类“bar” el.classList.remove（ “条”）;

//切换类“foo” el.classList.toggle（ “富”）;
如果el包含“foo”，则
//向控制台输出“true”，否则输出“false” console.log（el.classList.contains（“foo”））;

//向el添加多个类 el.classList.add（“foo”，“bar”）;

添加和删除不起作用的类

3 个答案:

添加和删​​除不起作用的类

3 个答案:

添加和删除不起作用的类