Javascript jQuery$（此）在函数中不工作

我有一个简单的函数，它复制一些html，并将其放在另一个div中。 如果我把函数的代码放在click事件中，它可以正常工作，但是当我把它移动到一个函数中（在多个地方使用）时，它就不再工作了。 你知道这是为什么吗

如果我使用console.log（$（this））；在函数中，它返回窗口元素

 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();
 });

这里是代码笔-

---

我是否应该以不同的方式引用$（this）？

在
click（）
事件的上下文中，this

是单击的元素。在函数

addHTMLtoComponent

的上下文中，此

不再是对所单击元素的引用

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

---

---

在
click（）
事件的上下文中，这是单击的元素。在函数
addHTMLtoComponent
的上下文中，此
不再是对所单击元素的引用

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


由于您手动调用了该函数，它不知道“this”上下文，因此它将恢复为使用窗口对象

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

// Change to this

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

Ref:
由于您手动调用该函数，它不知道“this”上下文，因此它会恢复为使用窗口对象

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

// Change to this

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

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

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

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

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

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

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

你可以考虑的是，<代码> AdHTMLtoCuffon（）/Cuth>可以被制作成一个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方法对根对象引用的所有元素进行操作，并返回该对象以进行进一步的链接操作。这就是外部
返回的。each（）
构造的作用

<> > <代码> >（代码）>回调，您有一个典型的jQuery回调情况，其中<代码> > 被依次设置到外部jQuery对象的每个成员。
 可以考虑的一件事是：<代码> AdHTMLtoCuttoType（）/代码>可以被制成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方法对根对象引用的所有元素进行操作，并返回该对象以进行进一步的链接操作。这就是外部
返回的。each（）
构造的作用

在
.each（）
回调中，您有一个典型的jQuery回调情况，
this
被依次设置到外部jQuery对象的每个成员。
当您自己调用函数时，特殊的关键字
this
是
窗口
对象（这是您观察到的）。对于所需的行为，只需向加载相应上下文的函数添加一个参数：

函数addHTMLtoComponent（上下文）{
var wrapper=$（上下文）.closest（“.wrapper”）；
var component=$（包装器）.find（“.component”）；
var componentCodeHolder=$（包装器）.find（'.target'）；
$（componentCodeHolder）.text（component.html（））
//log（$（上下文））；
}
$（“.js\u show\u html”）。单击（函数（）{
添加HtmlToComponent（本）；
});
当您自己调用函数时，特殊关键字
this
是
窗口
对象（这是您观察到的）。对于所需的行为，只需向加载相应上下文的函数添加一个参数：

函数addHTMLtoComponent（上下文）{
var wrapper=$（上下文）.closest（“.wrapper”）；
var component=$（包装器）.find（“.component”）；
var componentCodeHolder=$（包装器）.find（'.target'）；
$（componentCodeHolder）.text（component.html（））
//log（$（上下文））；
}
$（“.js\u show\u html”）。单击（函数（）{
添加HtmlToComponent（本）；
});
您需要将
$（this）
传递给您的函数：
函数addHTMLtoComponent（$this）{}
，并使用
addHTMLtoComponent（$（this））调用它。
函数不知道调用方是谁，因此它不知道
此
引用的是谁，您还需要将其（作为参数）传递给自己，查看有关此
为何如此工作的更多信息。可能重复
$（“.js\u show\u html”）。单击（addHTMLtoComponent）
您需要将
$（this）
传递给您的函数：
函数addHTMLtoComponent（$this）{}
，并使用
addHTMLtoComponent（$（this））调用它。
函数不知道调用方是谁，因此它不知道
此
引用的是谁，您还需要将其（作为参数）传递给自己，查看有关此
为何如此工作的更多信息。可能重复
$（“.js\u show\u html”）。单击（addHTMLtoComponent）
我知道这回答了问题，但是不应该用
this
的值调用
addHTMLtoComponent
？e、 g.
addHTMLtoComponent.call（this）而不是盲目地传递jQuery对象？@DavidBarker如果函数被编写为始终接受jQuery对象，并且被记录为这样，为什么不传递一个呢？我必须同意David的观点。使用
this
而不是
$（this）
的优点是它支持jQuery构造函数支持的所有内容，包括元素和jQuery对象（）。@DavidBarker它没有盲目地传递任何内容，更多