0

li要素をクリック可能にし、場所を 内のリンクの場所に設定する小さなスクリプトがありますli。これはエラーなしで実行され、私の 2 つの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>
4

1 に答える 1

3

変数が local のままになるように、接頭辞$hrefを付けます。 現在、ループ内で上書きされ続ける変数を上書きしています。var
$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');
});
于 2012-05-06T19:51:07.943 に答える