配列に追加して値を出力する - 配列値を出力しない

Question

クリックしたhref属性を保存して配列を出力する<a>タグを探しようとしています。

問題：配列はhrefの値を保存しているようですが、forループを使用しようとすると表示されません。 forループがクリックイベントハンドラの中にあるときに配列内のすべての値を表示するだけです（そして、ループのために印刷したくありません）。アイデア？

 $(document).on('click', 'a', function() { 
     var url = $(this).attr('href') 
     hrefTracker.push(url); 

     }); 

    for (var i = 0; i < hrefTracker.length; i++) { 
     console.log(hrefTracker[i]); 
    } 

Answer 1

確かに、コードは機能しません。理由は次のとおりです。

初めてイベントリスナーを割り当て、<a>要素のクリックを待ちました。イベントリスナ内のコードは、<a>要素がクリックされたときにのみ実行されますが、forループはWebページのロード時にのみ実行され、<a>要素がクリックされたときには実行されません。あなたは本当にforループをイベントリスナーの中に置く必要があります。

var hrefTracker = []; 
 
$(document).on('click', 'a', function() { 
 
    var url = $(this).attr('href'); 
 
    hrefTracker.push(url); 
 
    for (var i = 0; i < hrefTracker.length; i++) { 
 
    console.log(hrefTracker[i]); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="javascript:void(0)">Some links</a> 
 
<br> 
 
<a href="javascript:void(1)">Some links</a> 
 
<br> 
 
<a href="javascript:void(2)">Some links</a> 
 
<br> 
 
<a href="javascript:void(3)">Some links</a> 
 
<br>

あなたもvar url = $(this).attr('href')を読み込む行の後にセミコロンを省略しています注意してください。