jQuery $（this）在函数内部时不起作用

Question

我有一个简单的功能，可以复制一些html，并将其放在另一个div中。 如果我将函数的代码放入click事件中，则可以正常工作，但是当我将其移入函数（要在多个位置使用）时，它将不再起作用。 你知道为什么吗

如果我console.log（$（this））; 在函数中，它返回window元素。

 function addHTMLtoComponent () {
        var wrapper = $(this).closest(".wrapper");
        var component = $(wrapper).find(".component");
        var componentCodeHolder = $(wrapper).find('.target');   

         $(componentCodeHolder).text(component.html())
      //console.log($(this));
 }

 $(".js_show_html").click(function () {
     addHTMLtoComponent();
 });

这里的codepen- http: //codepen.io/ashconnolly/pen/ebe7a5a45f2c5bbe58734411b03e180e

我应该以其他方式引用$（this）吗？

Answer 1

关于其他答案，我需要提出最简单的答案：

$(".js_show_html").click(addHTMLtoComponent);

Answer 2

this在的情况下click()事件是点击的元素。 在addHTMLtoComponent函数的上下文中， this不再是对单击元素的引用。

尝试将单击的对象传递给函数以维护对象引用。

---

function addHTMLtoComponent ($obj) {
    var $wrapper = $obj.closest(".wrapper");
    var $component = $wrapper.find(".component");
    var $componentCodeHolder = $wrapper.find('.target');
    $componentCodeHolder.text($component.html());
}

$(".js_show_html").click(function () {
    addHTMLtoComponent($(this));
});

Answer 3

由于您是手动调用该函数，因此它不知道“ this”上下文，因此它会还原为使用window对象。

$(".js_show_html").click(function () {
     addHTMLtoComponent();
 });

// Change to this

$(".js_show_html").click(function () {
     addHTMLtoComponent.call(this);
 });

参考： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Answer 4

您必须将元素作为参数传递给此函数。 例如：

<div onclick="addHTMLtoComponent ($(this))"></div>

Answer 5

您可以考虑的一件事是，可以将addHTMLtoComponent()做成jQuery函数本身：

$.fn.addHTMLtoComponent = function() {
    return this.each(function() {
      var wrapper = $(this).closest(".wrapper");
      var component = $(wrapper).find(".component");
      var componentCodeHolder = $(wrapper).find('.target');   

      componentCodeHolder.text(component.html())
    });
}

现在，您可以像调用其他任何jQuery方法一样调用它：

$(".js_show_html").click(function () {
   $(this).addHTMLtoComponent();
});

jQuery方法中的this值将是jQuery对象本身，因此您无需使用$()重新包装它。 按照约定（在有意义的时候），jQuery方法对根对象引用的所有元素进行操作，并且它们返回该对象以进行进一步的链式操作。 这就是外部return this.each()构造所做的事情。

在.each()回调内部，您有一种典型的jQuery回调情况， this是依次设置到外部jQuery对象的每个成员的。

Answer 6

当您单独调用函数时，特殊关键字this是window对象（这是您观察到的）。 对于所需的行为，只需在函数中添加参数即可加载适当的上下文：

 function addHTMLtoComponent(context) {
   var wrapper = $(context).closest(".wrapper");
   var component = $(wrapper).find(".component");
   var componentCodeHolder = $(wrapper).find('.target');

   $(componentCodeHolder).text(component.html())
     //console.log($(context));
 }

 $(".js_show_html").click(function() {
   addHTMLtoComponent(this);
 });