jquery - 将 jQuery 单击事件绑定(bind)到 foreach 循环中的每个元素

Question

我正在构建一个与元素匹配的插件，在其中找到链接并通过单击使父元素转到该位置。

我在主体中有一个循环:

    return this.each(function(options) 
{

    $to_link = $(this); //matched object
    link_href = $('a', $to_link).attr('href'); //link location
    $($to_link,$parent)
        .click(function(){alert(link_href); window.location = link_href; return false;})
        .attr('title','Jump to ' + link_href);
})

我正在针对此 HTML 运行它

<div id="a"><h2><a href="/products/">Products</a></h2><p>blah blah</p></div>
<div id="b"><h2><a href="/thinking/">Thinking</a></h2><p>liuhads</p></div>

我遇到的问题是，尽管元素的标题具有正确的值，但单击函数始终会导致跳转到最后一个匹配的 div 链接的值。

澄清一下，行为应该是:

• div#a 的标题为“跳转到/products/”，点击后将转到/products/

• div#a 的标题为“跳转到/thinking/”，点击后会转到/thinking/

相反，发生的事情是:

• div#a 的标题为“跳转到/products/”，点击后会转到 /thinking/(警报也显示/thinking/)

• div#a 的标题为“跳转到/thinking/”，点击后会转到/thinking/

ie div#a 最终出现错误的行为。我猜这是某种范围问题，但我一生都看不到它，救命!

Answer 1

您忘记了作业中的 var，因此您共享了一个全局变量，并将它们搞混了。

$to_link = $(this); //matched object
link_href = $('a', $to_link).attr('href'); //link location

应该是

var $to_link = $(this); //matched object
var link_href = $('a', $to_link).attr('href'); //link location

否则，link_href 将保留最后一个值，即单击处理程序在调用时将看到的值。