javascript - 删除以前添加的类不起作用

Question

我正在使用 js 向一篇文章添加一个类，一切正常，没问题。但是如果我想删除那个类，这种方法就不起作用了。我不能使用 jQuery。

 document.addEventListener("DOMContentLoaded", function() {
            var blogCard = document.querySelectorAll('[data-role="blogCard"]');
            for (let i = 0; i < blogCard.length; i++) {
                blogCard[i].addEventListener('click', function() {
                    this.classList.add('opened-card');

                    var closeCard = document.querySelectorAll('[data-role="closeCard"]');
                    closeCard[0].addEventListener('click', function() {
                        var pThis = this.parentNode;
                        pThis.classList.remove('opened-card');
                    });

                });
            };

        });

    <div class="card" data-role="blogCard">
        <button data-role="closeCard">Close</button>
    </div>

我已经尝试将“删除”更改为“添加”并且效果很好，它添加了类。但是当我回去删除它时，它不起作用。

Answer 1

因为 click 事件传播到父级，所以这里实际上触发了两个点击处理程序。 button.closeCard 单击处理程序删除类，但 div.blogCard 将其添加回来。 :) 这就是为什么添加类有效，但删除类无效的原因。

要解决这个问题，您可能只是阻止第二个处理程序中的事件传播，或者只是使用 div.blogCard 上设置的组合事件处理程序，根据 事件选择行为。 target(本质上是实现委托(delegate))。像这样:

blogCard[i].addEventListener('click', function(event) {
  if (event.target.getAttribute('data-role') === 'closeCard') {
    this.classList.remove('opened-card');
  }
  else {
    this.classList.add('opened-card');
  }
});

事实上，您可能会考虑使用相同的技术 - 检查目标在 DOM inside 事件处理程序中的位置 - 通过将单个事件处理程序应用于这些卡片的父级(如果有单个父级，类(class)):

// a single event handler set on some 'cardContainer' element
var blogCard = event.target.closest('[data-role="blogCard"]');
if (blogCard) {
  var action = event.target.closest('[data-role="closeCard"]') ? 'remove' : 'add';
  blogCard.classList[action]('opened-card');
}

正如@IronFlare 正确提到的那样，这不仅比在循环中分别为每张卡片执行更高性能和更易于阅读，而且还可以在设置事件处理程序后处理添加到 DOM 的所有卡片。