Question

下面的JS工作原理与它应该完全一样，我的JS知识是0％。唯一的问题是我需要下面的代码来定位多个div，但相同的id或不同的id无关紧要。它也需要是无限的。所以每50秒需要重复一次。以下js的目标是重置我运行的CSS3动画。项目文件可在此处找到：www.dreamsynk.com/img/slider。

// retrieve the element
element = document.getElementById("ani");

setTimeout(function() {
// -> removing the class
element.classList.remove("one");

// -> triggering reflow /* The actual magic */
// without this it wouldn't work. Try uncommenting the line and the transition won't be    retriggered.
element.offsetWidth = element.offsetWidth;

// -> and re-adding the class
element.classList.add("one");
}, (50*1000)); //40 seconds

更新

<div class="slider">
<div class="inner">
    <div id="ani" class="one"></div>
    <div id="ani" class="two"></div>
    <div id="ani" class="three"></div>  
    <div id="ani" class="four"></div>
    <div id="ani" class="five"></div>
    <div id="ani" class="six"></div>
</div>
</div>


// retrieve an array-like object with elements
var elements = document.querySelectorAll("ani");

setTimeout(function() {
for (var i=0; i<elements.length; i++) {
var element = elements[i];
element.classList.remove("one two three four five six");
element.offsetWidth = element.offsetWidth;
element.classList.add("one two three four five six");
}
}, (50*1000)); //50 seconds

我做错了什么？

Answer 1

如果您想拥有一系列元素，则应使用document.getElementsByClassName。 document.getElementById通常只为您提供该ID的第一个元素。

ID和类之间的区别在于ID可用于标识一个元素，而一个类可用于标识多个元素。

您也可以使用document.getElementsByName()， document.getElementsByTagName()，当然是document.getElementsByTagNameNS()和document.querySelectorAll()。

您从document.getElementsByClassName获得的元素称为HTMLCollection，它只是一个数组。因此，如果要将元素添加到集合中，可以使用array.push。

var array = document.getElementsByClassName("classname");
var element = document.getElementById("ani");
array.push(element);
setTimeout(function() {
    var i = array.length; 
    while(i--) {
       array[i].classList.remove("one");
       array[i].offsetWidth = element.offsetWidth;
       array[i].classList.add("one");
    }
}, (99999));

更新

.classList.remove()一次只能完成1个课程。同样的道理到.classList.add()。

您可以为DOMTokenList创建prototype 像这样：

DOMTokenList.prototype.addMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.add(array[i]);
    }
}

以这种方式删除/添加类：

element.classList.addMany("one two three four five six");

顺便提一句.querySelectorAll(selector)，你没有使用一个合适的CSS选择器。

您可以阅读有关CSS选择器here语法的更多信息。

正如我之前提到的，你不能有重复的ID。

Ids应该是唯一的。

Answer 2

您可以使用querySelectorAll获取包含任何css路径的元素，然后每隔50秒在它们之间进行迭代，并执行与单个元素相同的步骤。

为您的用例修复的代码：

HTML：

<div class="slider">
<div class="inner">
    <div class="ani" id="one"></div>
    <div class="ani" id="two"></div>
    <div class="ani" id="three"></div>  
    <div class="ani" id="four"></div>
    <div class="ani" id="five"></div>
    <div class="ani" id="six"></div>
</div>
</div>

JavaScript的：

var container = document.querySelector('slider');
var elements = Array.prototype.slice.call(container.querySelectorAll(".ani"));

setTimeout(function() {
  elements.forEach(function(el) { el.classList.remove('ani'); });
  container.offsetWidth = container.offsetWidth;
  elements.forEach(function(el) { el.classList.add('ani'); });
}, (50*1000)); //50 seconds

Answer 3

// retrieve the elements
var elements = document.querySelectorAll("div");

setInterval(function() {
    for(var i = 0; i < elements.length; i++){
        // -> removing the class
        elements[i].classList.remove("one");

        // -> triggering reflow /* The actual magic */
        // without this it wouldn't work. Try uncommenting the line and the transition won't be    retriggered.
        elements[i].offsetWidth = element.offsetWidth;

        // -> and re-adding the class
        elements[i].classList.add("one");
    }
}, (50*1000)); //50 seconds

JS定位多个类并无限重复

3 个答案: