2

以下のコードは、クリックするたびに関数に変更される配列を渡す方法を理解しようとして、非常に長い間苦労してきました。

問題は、clickedLinks配列が変更されるとすぐに、shoplist関数のpassedLinks配列に影響を与えることです。

なぜこれが起こっているのかについての素晴らしい説明さえも得ましたが、それを私の例に正しく適用することはできません。さまざまなポイントで配列をクリアしようとしましたが、うまくいきませんでした。コードのロジック全体に欠陥があるかどうか疑問に思い始めています。

どんな助けでもいただければ幸いです。

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>
      Test 1
    </title>
    <script src="http://code.jquery.com/jquery-latest.js" type=
    "text/javascript">
</script>
  </head>
  <body>
    <div class="items">
      <ul>
        <li>
          <a href="#" id="link1">Link 1</a>
        </li>
        <li>
          <a href="#" id="link2">Link 2</a>
        </li>
        <li>
          <a href="#" id="link3">Link 3</a>
        </li>
        <li>
          <a href="#" id="link4">Link 4</a>
        </li>
      </ul>
    </div>

<script type="text/javascript">
    var clickedLinks = [];
    var passedItems = [];


    // Collect clicked link IDs into an array and pass the array as an argument to shoplist()
    $('.items a').click(function () {

    if (clickedLinks.indexOf(this.id) != -1) {
        var linkIndex = clickedLinks.indexOf(this.id);
        clickedLinks.splice(linkIndex, 1);
    } else {
        clickedLinks.push(this.id);
    }

    shoplist(clickedLinks);

    });


    function shoplist(ids) {
        passedItems.push(ids);
        alert(passedItems);
    }
</script>
</body>
</html>

手順：

  1. 「リンク1」をクリック
  2. 「リンク2」をクリック

期待される結果：アラートウィンドウに「link1、link1、link2」と表示されます

実際の結果：アラートウィンドウに「link1、link2、link1、link2」と表示されます

4

1 に答える 1

1

ids配列をそのままプッシュしていますが、後で変更されます。を使用してそのコピーをプッシュする必要がありますslice。何かのようなもの：

passedItems.push(ids.slice());

また、if条項の必要性が理解できませんでした。アイテムがすでに存在する場合は、追加しないでください。または私は何かが欠けていますか？

DEMOを参照してください。

于 2012-08-24T21:30:10.263 に答える