Question

我有以编程方式点击.special链接时触发的此代码。

$(document).ready(function(){$('.special').trigger('click');});
$(document).on('click', '.special', function(){
  var url  = $(this).attr('href');
  // More code that might depend on $(this)
});

当用户手动点击其他链接时，也会触发上述on click事件中的相同代码。所以，在页脚的某个地方我也有这个代码。

$('.manual').on('click', function() {
   var url  = $(this).attr('href');
  // More code that might or might not depend on $(this)
});

我的问题是，我必须将相同的代码放在两个地方（.manual以及.special链接）。为避免代码重复，我用以下内容替换了手动代码，并删除了上面的特殊事件。

$(document).on('click', '.manual,.special', function(){
  var url  = $(this).attr('href');
  // More code that might depend on $(this)
});

但是，上述代码已停止在.special链接上工作。我的问题是，如果有某种方法我可以在外部使用$(this)引用并将其称为函数。

的内容

function whenClicked() {
  var url  = $(this).attr('href');
  // More code that might depend on $(this)
}

并像这样调用whenClicked函数：

$(document).on('click', '.special', function(){
  whenClicked();
});

$('.manual').on('click', function() {
   whenClicked();
});

虽然如果我能以某种方式将.manual和.special结合起来，就像我在上面尝试的那样，那会更理想。

Answer 1

有几种方法可以做到这一点

1 - 将函数引用传递给$.on

$(document).on('click', '.special', whenClicked);

2 - 使用.call或.apply

$(document).on('click', '.special', function(){
  whenClicked.call(this);
});

3 - 将this作为参数传递

$(document).on('click', '.special', function(){
  whenClicked($(this));
});

function whenClicked($element) {
  var url  = $element.attr('href');
}

Answer 2

如何简单地将所需元素作为参数传递？

function whenClicked($element) {
  var url  = $element.attr('href');
  // More code that might depend on $(this)
}

注意：我在这个例子中假设一个jQuery元素

否则为DOM元素

function whenClicked(element) {
  var url  = $(element).attr('href');
  // More code that might depend on $(this)
}

Answer 3

this的范围阻止了你的尝试;但你可以很容易地解决它。

你的功能应该有一个参数（下面选择“t”）。

function whenClicked(t) {
  var url  = t.attr('href');
  // More code...
}

然后你应该在调用函数时传递$(this)作为参数。

$(document).on('click', '.special', function(){
  whenClicked($(this));
});

$('.manual').on('click', function() {
   whenClicked($(this));
});

如何参考＆＃39;这个＆＃39;在事件之外的jQuery中？

3 个答案: