javascript - 如何使用 jQuery 处理 "defile"文本?

标签 javascript jquery html css

首先,我是 jQuery 的新手。 我真正想要的是:

  • 要有一个句子列表
  • 例如那些句子的颜色是黑色
  • jQuery 使句子改变颜色(例如当前的颜色为红色)并使这种效果从一个句子到下一个句子。

这是我非常简单的例子:

$(document).ready(function() {
  myVar = setInterval(alertFunc, 3000);
});

function alertFunc() {

  for (var i = 0; i < 5; i++) {
    $("#" + i).css("color", "rgb(255,194,0)"); //this is the color of the current li and it loops to the next one..ect
  }
}
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style-type: none;
  line-height: 30pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="line" id="1">one</li>
  <li class="line" id="2">two</li>
  <li class="line" id="3">three</li>
</ul>

如果有人能帮助我,那就太好了,我真诚地努力让它工作几个小时但没有结果。

最佳答案

这可能就足够了!!

$(document).ready(function() {
  i =1;
  $("#" + i).css("color", "rgb(255,194,0)"); //sets line of first color initially just once
  i++;
  myVar = setInterval(alertFunc, 3000);
  
});

function alertFunc() {
  
    $(".list li.line").css("color", "rgb(0,0,0)"); //resets the color of all lines to black
    $("#" + i).css("color", "rgb(255,194,0)"); //this is the color of the current li and it loops to the next one..ect
  if(i==3){
    i=1;
}else{
  i++;
  }
  }
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style-type: none;
  line-height: 30pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="line" id="1">one</li>
  <li class="line" id="2">two</li>
  <li class="line" id="3">three</li>
</ul>

关于javascript - 如何使用 jQuery 处理 "defile"文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34507054/

相关文章:

javascript - 创建自定义 get/set 时为 "Stack size exceeds"

javascript - SPA 具有 Angular 和基于 cookie 的身份验证

Javascript 不会抛出新的错误

javascript - CSS 在 AngularJS 中不动态更新

Jquery错误和正确的循环索引

jquery - 将 <a> 点击事件作为 Google Analytics 事件处理

jquery - 向 jQuery 数据表添加刷新按钮

html - 位置 : fixed scrolls too far

html - 客户宽度不对

PHP - 将 <head></head> 数据作为包含加载是否愚蠢