javascript - 使用 JavaScript 突出显示文本颜色

Question

//<![CDATA[
var blinkText = $(".highlight");

var interval = setInterval(function() {
  blinkText.toggleClass("highlightRed");
}, 500);
//]]>

.highlight {
  -webkit-transition: background 1.0s ease-in-out;
  -ms-transition: background 1.0s ease-in-out;
  transition: background 1.0s ease-in-out;
}
.highlightRed {
  color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="highlight" style="font-weight: bolder; font-size: 33px; color: #00F">&rarr;</span>

JSFiddle:

上面的代码应该使给定的箭头根据给定的时间间隔闪烁，但它没有。如何让箭头根据给定的时间间隔改变颜色？

Answer 1

您需要更改以下内容才能使您的代码正常工作。

1. 将 jQuery 附加到您的网页。
2. 在 $(function() { ... }); 代码中使用您的 JavaScript 代码，以便它在 DOM 中找到元素
3. 将内联样式移动到附加的样式表。
4. highlightRed 类的样式应该在样式表中的.highlight 样式之后。

注意:无需在您的样式中使用 !important。应尽可能避免。

$(function() {
  var blinkText = $(".highlight");

  var interval = setInterval(function () {
      blinkText.toggleClass("highlightRed");
  }, 500);
});

.highlight {
    -webkit-transition: background 1.0s ease-in-out;
    -ms-transition: background 1.0s ease-in-out;
    transition: background 1.0s ease-in-out;
    font-weight: bolder;
    font-size: 33px;
    color: #00F;
}

.highlightRed {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span class="highlight">&rarr;</span>