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>

Answer 2

您可以使用以下代码和css3轻松完成：

$( document ).ready(function() {
    $('.text.notify').toggleClass('flash');
});

CSS3：

.flash {
    color: #DC4900;
    animation: flasher 1s linear 2;
}

@keyframes flasher {  
    50% { opacity: 0.0; }
}

Check the fiddle here.

Answer 3

请改为：

$( document ).ready(function() {

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

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

3 个答案: