javascript - 如何委托(delegate)这个功能

Question

我想运行一个简单的函数，但我认为存在委托(delegate)问题。

我在页面加载后动态地向现有元素添加一个类。 ($(elemen).addClass('myclass-123');)

现在我想在检测元素是否调整大小或滚动的函数中使用此元素。

如果我用一个已经有类的元素运行这段代码 - 一切正常。

如果我后面加一个类，这个元素就不行了，所以我认为是函数和元素的委托(delegate)有问题，但我不知道如何解决。

$(window).on('resize scroll', function() {
   console.log("check number of elements on page: "+$("[class^='myclass-']").length);
   $("[class^='myclass-']").each(function() {... do something with the elements });
});

Answer 1

这不是事件委托(delegate)问题，因为当 resize 或 scroll 事件触发时，只要元素具有类，它们就会被选中。

问题是因为您的选择器依赖于 myclass 作为属性中的第一个，例如 class="myclass foo"，但是如果您稍后添加该类它将位于属性的末尾，例如 class="foo myclass"，因此不会被属性选择器找到。您可以在 DOM 检查器中确认这一点。

要修复它，请改用 filter() 来查找具有以 myclass- 开头的任何类的元素:

$(window).on('resize scroll', function() {
  $('[class*="myclass-"]').filter(function() {
    return this.classList.some(c => c.indexOf('myclass-') == 0);
  }).each(function() {
    // do something with the elements 
  });
});

请注意，如果您将单个类添加到所有元素而不是带前缀的动态元素，则上述内容可以变得更简单。