Question

我有一个小脚本，可以点击li元素，并将位置设置为li内部链接的位置。这样运行没有错误，我的两个console.log()来电正在报告我的预期，但是，当您点击li（以li为准）时，href上一个li中的链接。这对我来说没有多大意义，因为我认为我已经妥善处理了范围。

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

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');
});

jQuery .each广泛应用

1 个答案: