使用＆＃34;这个＆＃34;作为论据

Question

我有一个onclick功能可以从一个＆＃34;页面＆＃34;对另一个人（它实际上并没有导航，只是模仿它）：

$('.button').on('click', function(){
    $('.home').css('display','none');
    var newPage = $('.'+this.id);
    goTo(newPage);
});

goTo简化以供参考：

function goTo(page){
 $(page).css('display', 'block');
}

这完全没问题。所有导航按钮都有按钮类，还有一个与不同＆＃34;页面的类名相匹配的ID＆＃34;。单击＃page1，display .page1等

现在我的问题是我不得不重写我的代码来为其他元素做同样的事情 - 尝试用参数重写它并不特别适用于此。

这是我尝试的内容：

function goToPage(link, destination){
 link.click(function(){
  $('.home').css('display','none');
  goTo(destination);
 }
}

并将其称为：

goToPage($('#page1'), $('.page1'));

工作正常，但是：

goToPage($('.button'), $('.'+this.id));

没有按＆＃39;吨

我想我误解了这个＆＃34;这个＆＃34;正在这方面工作。我认为它只会决定什么＆＃34;这个＆＃34;是在调用参数时。

所以我的问题是：可以＆＃34;这个＆＃34;以这种方式作为一个论据，我是略微偏离逻辑还是我是一个完全白痴？

小提琴：https://jsfiddle.net/hek0ptca/13/

Answer 1

要明确回答你的问题，不，this在这种情况下不能用作参数，因为它指的是什么。

goToPage($('.button'), $('.'+this.id));

在此上下文中，this指向“未定义”。尝试在上述代码的相同范围内运行console.log(this.id);并检查浏览器的控制台。它返回“未定义”。

考虑this的一个好方法是你需要一些东西来引用它。范围很重要。如果没有任何内容可供参考，您将始终将“未定义”作为值。通常this用于已引用对象的函数内，例如，在事件处理程序中：

$('.button').click(function(){
    $('#home').css('display', 'none');
    goTo($('.'+this.id));
});

这将适用于这种情况，因为this将引用正在操作的对象，.button类。