Question

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

在JavaScript中，变量_pagerList是对象列表，每个对象都会将div移动到相应的幻灯片。问题是所有这些都是一样的，所以我改为警告，看到'data-slide'值和所有返回6。

的 CODE

<!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>

Answer 1

你应该改变这一行

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

到这个

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

Answer 2

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]);
  }

有关闭包check this other SO question

的详细信息

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

的 CODE

2 个答案: