1

我有一个简单的点击处理程序，它会提醒它的链接href，如下所示：

<a id="link" href="http://www.google.com">Google</a>

$('a#link').on('click', function() {
  alert($(this).attr('href'));
});

如何分离函数（以及如何调用它）以便它可以被另一个点击处理程序调用？

function showHref() {
  /* What to do here because $(this) won't resolve to <a> anymore. */
}

// I'd like a#another-link to be able to call that same function above.    
<a id="another-link" href="http://www.microsoft.com">Microsoft</a>

$('a#another-link').on('click', /* How to call showHref? */);

谢谢。

4

3 回答 3

1

你可以这样做：

function showHref() {
   alert($(this).attr('href'));
}

$('a#link').on('click', showHref);
$('a#another-link').on('click', showHref);

在这段代码中，this里面的showHref 将引用被点击的链接，因为 jQuery 确保被点击的链接是调用上下文（使用.call()它你可能想继续阅读）。但是，如果您要手动调用showHref，this则不会引用您的链接。

如果您想要一个showHref既可以手动调用又可以通过 jQuery 绑定的定义，将引用作为参数传递可能是最简洁的：

function showHref(link) {
    alert($(link).attr('href'));
}

在这种情况下，您必须按如下方式调整您的听众：

$('a#link').on('click', function() {
    showHref(this);
});

但也可以组合选择器：

$('a#link, a#another-link').on('click', function() {
   alert($(this).attr('href'));
});
于 2012-05-02T08:16:56.543 回答
1

您可以将函数逻辑放入这样的引用中：

var handler = function () {
    alert($(this).attr('href'));
};

然后您可以使用该引用来初始化事件侦听器：

$('#link').on('click', handler);

当然，您可以重复使用它。

$('#some_other_link').on('click', handler);

或者在事件处理程序上下文之外自己调用它（如果您正在设计事件处理程序函数，这通常没有意义——但通常可以使用 lambdas 来完成）。

handler();

但是如果你只想在一个元素上触发事件，你应该调用相应的事件触发函数。

$('#link').click();
// or
$('#link').trigger('click');
于 2012-05-02T08:18:14.397 回答
0

你写了：

function showHref() {
  /* What to do here because $(this) won't resolve to <a> anymore. */
}

嗯，实际上，是的，它会的。这正是 DOM 事件以及使用 jQuery 注册的事件处理程序所做出的承诺。

FWIW，内容应该是：

alert(this.href)

真的不需要调用 jQuery 来获取元素的href属性。

于 2012-05-02T08:23:53.527 回答