javascript - jQuery .each 被广泛应用

Question

我有一个小脚本，它使 li 元素可点击，并将位置设置为 li 内部链接的位置。它运行时没有错误，并且我的两个 console.log() 调用正在报告我所期望的内容，但是，当您单击 li (以 li)您将获取最后一个 li 中链接的 href。这对我来说没有多大意义，因为我认为我已经正确处理了范围。

请纠正我的理解并让我知道我哪里错了。

JavaScript:

$(".homeCTA li").each(function(){
    $href = $(this).find("a").attr("href");
    console.log($(this)); // displays the expected selector
    console.log($href); // displays the correct href
    $(this).click(function(){ window.location = $href }); // this is overriding all of the previous passes
}); 

HTML:

<ul class="homeCTA">
    <li class="left"> 
        <img src="first-source.jpg">
        <h2><a href="SearchResults.asp?Cat=1833">Yada Yada Yada</a></h2>
    </li>
    <li class="right">
        <img src="second-source.jpg">
        <h2><a href="SearchResults.asp?Cat=1832">Try the bisque</a></h2>
    </li>
</ul>

Answer 1

在$href前面加上var，这样变量remains local .
目前，您正在覆盖 $href 变量，该变量在循环中不断被覆盖。

$(".homeCTA li").each(function(){
    var $href = $(this).find("a").attr("href");
    console.log($(this)); // displays the expected selector
    console.log($href); // displays the correct href
    $(this).click(function(){ window.location = $href; });
}); 

您还可以使用以下代码，而不是循环遍历列表项:

$(".homeCTA").on('click', 'li', function(){
    window.location = $(this).find('a').attr('href');
});