Question

我有一个包含UL列表元素。我需要创建一个效果，按顺序突出显示每个列表项并更改其背景颜色。

这只是一个突出显示效果，它会每秒添加/删除一个类并沿着列表移动。

基本的HTML：

<ul id="looping-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    etc...
</ul>

我目前陷入困境：

var ul = document.getElementById("looping-list");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {

}

感谢。如果需要，我可以改变列表的html，为每个元素或数据属性提供一个id，因为它们来自PHP for循环。

这个也没有jQuery。

Answer 1

您无法使用for执行此操作，因为您需要在更改之间回退到浏览器。但除此之外，你还处于正确的轨道上。

以下是使用setTimeout的示例。我已经假设你想要继续循环它们，当你到达终点时回到起点。如果您动态添加/删除项目，此版本也可以很好地适应列表中的更改。

＆＃13;

// Strict mode helps us avoid errors like The Horror of Implicit Globals
"use strict";

// A scoping function to avoid creating global variables
(function() {
  // An index we'll use to keep track of which element should be next.
  // We'll pre-increment it, so start with -1.
  var index = -1;

  // Start the process
  update();
  
  function update() {
    // Get the list
    var list = document.getElementById("looping-list");
    
    // Remove the old highlight, if any
    var item = list.querySelector("li.highlighted");
    if (item) {
      // There is, remove it
      item.classList.remove("highlighted");
    }
    
    // Move to the next, wrapping around if appropriate
    var items = list.querySelectorAll("li");
    index = (index + 1) % items.length;
    
    // Add the class
    items[index].classList.add("highlighted");
    
    // Schedule a callback after a second
    // Add an `if` here if there's a termination condition
    setTimeout(update, 1000);
  }
})();

＆＃13;

.highlighted {
  color: blue;
}

＆＃13;

<ul id="looping-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

＆＃13;

注意：这使用classList，在上面的简单用法中为very well-supported in modern browsers，如果需要，可以在较旧的浏览器（IE9及更早版本）上进行填充。

Answer 2

如果我理解正确的话，就像这样：

var ul = document.getElementById("looping-list");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
  doSetTimeout(items[i], i);
}


function doSetTimeout(elm, i) {
  setTimeout(function() {
  	elm.style.backgroundColor = 'red';
  }, 200*i);
}

<ul id="looping-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

重复循环遍历列表元素，使用javascript为每个元素添加一个类

2 个答案: