JavaScript中将'this'作为参数传递

Question

I have the following code:

HTML:

<label id="copyAddress" class="copyAddress" onclick="CopyAddress(this);">
    Copy Address
</label>

JS:

function CopyAddress(copyAddressLink) {    
  PopulateTarget(copyAddressLink);   
}

function PopulateTarget(link) {
  var targetGroup = $(link).closest('someClass');    
}

在PopulateTarget函数中，“link”变量未定义，而在CopyAddress函数中它具有应有的值。

这个问题是由什么引起的？在JavaScript中传递参数是否有限制？这应该如何处理？如果您需要更多代码，请告诉我。

- eomeroff

---

似乎对我有效。 - Joseph Silber

你确定在 PopulateTarget 函数中 link 是 undefined 吗？还是 $(link) 的返回值是 undefined？在 CopyAddress 中 console.log("CopyAddressLink value: ", copyAddressLink); 上方，然后在 PopulateTarget 上方 var targetGroup = ... 之前加上 console.log("Link Value: ", link);。 然后查看控制台以查看这些值是什么。 如果您发布HTML结构，我们可以看到您在 .closest() 中的选择器是否实际起作用。 我敢打赌这就是原因。 - Jonathan

此外：您确定页面上有jQuery吗？ - Joseph Silber

Answer 1

既然你已经在使用jQuery，为什么还要使用侵入式的Javascript呢？

可以使用以下代码替代：

HTML：

<label id="copyAddress" class="copyAddress">Copy Address</label>

Javascript:

$(document).ready(function(){
    $('#copyAddress').click(function(){
        var targetGroup = $(this).closest('.someClass');    
    });
});

- Joseph Silber

---

应该是 .someClass，他在那里犯了一个错误...没有元素类型为 someClass。 - gdoron

@gdoron - 正确的。已修复。谢谢。 - Joseph Silber

Answer 2

你的代码中“someClass”少了一个点，应该写成“.someClass”。

也许你改正后代码就能正常运行。但是由于你在使用jQuery（看起来是这样），建议你用jQuery的方式添加点击事件处理器，而不是在HTML上内联添加。具体来说，你需要这样做：

$(document).ready(function(){
    $('#copyAddress').click(CopyAddress);
})

function CopyAddress() {    
    PopulateTarget(this);   
}

function PopulateTarget(link) {
    var targetGroup = $(link).closest('someClass');    
}

- bfavaretto

Answer 3

你不应该混合使用HTML和JS。相反，你应该在JS代码中以编程方式附加JS处理程序：

<!-- note: no onclick in this html -->
<label id="copyAddress" class="copyAddress">Copy Address</label>

// Wait until the page is loaded before starting to look for elements
$(function(){

  // Assuming jQuery 1.7
  $('#copyAddress').on('click',copyAddress);

  // …alternatively, for older jQuery
  $('#copyAddress').click(copyAddress);

  function copyAddress(evt){
    // The 'target' property of the event object passed in is the object
    // upon which the event was first triggered.
    PopulateTarget(evt.target);
  }
});

在上述情况下，您可以直接使用this而不是evt.target，因为您直接在该对象上绑定了事件。但是，如果页面上有多个执行此功能的项目，则此方法变得更加强大。您可以将事件处理程序一次附加到某个父对象，然后在回调期间询问单击了哪个元素。代码如下：

// Watch for any element with a copyAddress class to be clicked on,
// even if they are added after this code has run
$(document.body).on('click','.copyAddress',function(evt){
  var target = evt.target;
  console.log("You clicked on",target);
});

- Phrogz

---

“end”？！你搞混了一些东西 ;) - TimWolla

哎呀！谢谢你注意到了 :) 同时使用太多的 Ruby 和 JS。 - Phrogz

Answer 4

看起来你正在使用jQuery：

你可以使用jQuery.proxy将this绑定到特定的值。它的用法如下：

jQuery.proxy(function () { console.log(this); }, this);

- TimWolla

---

然而，在这种情况下并不需要这样做。 - Phrogz