getAttribute对于不同的对象是相同的

getAttribute is the same for different objects

本文关键字：对象 于不同 getAttribute      更新时间：2023-09-26

我有一个链接列表，这些链接将切换div的显示部分（如旋转木马），每个链接都有一个幻灯片属性。

在JavaScript中，变量_pagerList是对象列表，每个对象都会将div移动到相应的幻灯片上。问题是它们都做了同样的事情，所以我改为警报，以查看"数据幻灯片"值和所有返回的6。

代码 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <ul>
    <li><a class="pager-list" href="" data-slide="1"><img src="http://placehold.it/30" alt="" /></a></li>
    <li><a class="pager-list" href="" data-slide="2"><img src="http://placehold.it/30" alt="" /></a></li>
    <li><a class="pager-list" href="" data-slide="3"><img src="http://placehold.it/30" alt="" /></a></li>
    <li><a class="pager-list" href="" data-slide="4"><img src="http://placehold.it/30" alt="" /></a></li>
    <li><a class="pager-list" href="" data-slide="5"><img src="http://placehold.it/30" alt="" /></a></li>
    <li><a class="pager-list" href="" data-slide="6"><img src="http://placehold.it/30" alt="" /></a></li>
  </ul>
  <script>
    window.onload = function() {
      var _pagerList = document.querySelectorAll('.pager-list');
      for ( var i = 0; i < _pagerList.length; i++ ) {
        var p = _pagerList[i];
        p.onclick = function() {
          alert(p.getAttribute('data-slide')); 
          return false;
        };
      }
    }
  </script>
</body>
</html>

您应该更改这一行

alert(p.getAttribute('data-slide'));

到这个

alert(this.getAttribute('data-slide'));

for循环不会创建新的上下文，因此var p语句将始终将p保留为最后一个值集。要解决此问题，您需要使用闭包。

以下内容应该有效：

  for ( var i = 0; i < _pagerList.length; i++ ) {
    (function (p) {
        p.onclick = function() {
          alert(p.getAttribute('data-slide')); 
          return false;
        };
    })(_pagerList[i]);
  }

有关闭包的更多信息，请查看其他SO问题

相关文章：