简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - getElementsByTagName不是动态获取元素的吗，为什么这个还会动？
阿神
阿神 2017-04-11 11:42:03
0
2
260

想尝试做个轮播图下面的那种随着图片变化的点，感觉用动态获取会方便一些，但是做出来的效果好像是静态获取的了，点击第一个方块，console它的索引值一直是在变的，动态获取的话第一个不应该一直是0的吗？

http://runjs.cn/detail/cuxxtwzd

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p span{
      display:inline-block;
      width:10px;
      height:10px;
      margin:0 6px;
      background:red;
    }
  </style>
</head>
<body>
  <p></p>
  <script>
    var p=document.querySelector('p');

    for(var i=0;i<8;i++){
      p.innerHTML+='<span></span>';
    }

    var spans=p.getElementsByTagName('span');

    spans[0].style.background='green';

    setInterval(function(){
      p.insertBefore(spans[spans.length-1],spans[0]);
    },500);
    
    for(var i=0;i<spans.length;i++){
      spans[i].index=i；
      spans[i].onclick=function(){
        console.log(this.index);
      }
    }
  </script>
</body>
</html>
阿神
阿神

闭关修行中......

Antworte allen(2)
刘奇
刘奇2017-04-11 11:44:03 2 Etage

正是因为动态的所以会变啊。
因为setInterval函数里所做的操作，就是每半秒把spans中最后一个元素移动到第一个元素前面，由于spans是动态的，所以才正好每次都是把显示出来的最后一个元素放到第一个元素的前面。
一开始是各元素的index分别是 0 1 2 3 4 5 6 7
第一次是把span[7]（index=7）放到span[0]前面（index=0）结果为 7 0 1 2 3 4 5 6
第二次是把span[7]（index=6）放到span[0]前面（index=7）结果为 6 7 0 1 2 3 4 5
第三次是把span[7]（index=5）放到span[0]前面（index=6）结果为 5 6 7 0 1 2 3 4
以此类推。

Wie +0
Antwort hinzufügen
迷茫
迷茫2017-04-11 11:44:03 1 Etage 
var spans=p.getElementsByTagName('span');

这句就是把获取到的dom集合缓存到变量，后边所有的操作都是在操作这个缓存。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！