0

div の表示セクション (カルーセルなど) を切り替えるリンクのリストがあり、各リンクにはスライドの属性があります。

JavaScript では、変数_pagerListはオブジェクトのリストであり、それぞれが div を対応するスライドに移動します。問題は、それらのすべてが同じことを行うことです。そのため、「data-slide」の値とすべての戻り値 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

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の質問を確認してください

于 2013-08-05T17:17:09.413 に答える