javascript - 如果存在另一个类，则循环遍历 div 并切换类

Question

如果找到另一个类，我想切换一个类(并使用间隔使文本闪烁)。

CSS

.flash {
    color: #DC4900;
}

HTML

<div class="text notify">Flash</div>
<div class="text notify">Flash</div>
<div class="text">Don't Flash</div>

JS

$(document).ready(function() {
  $('.text').each(function() {
    if ($(this).hasClass('notify')) {
      setInterval(function() {
        $(this).toggleClass('flash');
      }, 1000);
    }
  });
});

https://jsfiddle.net/s9dv9qv3/

间隔没有正常工作。如果找到类通知，应该将 flash 类添加到文本中。

Answer 1

在 setInterval 回调中，this 指的是 window 对象。

要解决此问题，一种选择是在回调之外捕获对 this 的引用:

Example Here

$('.text.notify').each(function() {
  var self = this;

  setInterval(function() {
    $(self).toggleClass('flash');
  }, 1000);
});

我还删除了对 notify 类的检查，因为您可以直接选择这些元素。

---

或者，您也可以只使用 .bind() method设置 this 的值:

Example Here

$('.text.notify').each(function() {
  setInterval(function() {
    $(this).toggleClass('flash');
  }.bind(this), 1000);
});

---

作为旁注，由于您同时在所有元素上切换类，您可以只使用:

setInterval(function() {
  $('.text.notify').toggleClass('flash');
}, 1000);

---

如果要设置延迟，可以根据 .each() 循环的当前索引添加超时:

Example Here

$('.text.notify').each(function(i) {
  var self = this;

  setTimeout(function() {
    setInterval(function() {
      $(self).toggleClass('flash');
    }, 1000);
  }, 1000 * i);
});

---

最后，您可以完全避免使用 jQuery 并使用无限的 CSS3 动画:

.text.notify {
  animation: flash 2s infinite;
}
@keyframes flash {
  0%, 49% {
    color: #000;
  }
  50%, 100% {
    color: #DC4900;
  }
}

<div class="text notify">Flash</div>
<div class="text notify">Flash</div>
<div class="text notify">Flash</div>
<div class="text notify">Flash</div>
<div class="text">Don't Flash</div>