0

我有一个链接列表，这些链接将切换 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>
4

2 回答 2

2

你应该改变这一行

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

对此

alert(this.getAttribute('data-slide'));
于 2013-08-05T17:19:36.017 回答
1

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 question

于 2013-08-05T17:17:09.413 回答