Question

我有这个简单的功能，复制一些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();
 });

codepen here - 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”上下文，因此它将恢复使用窗口对象。

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

// Change to this

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

参考：https://developer.mozilla.org/en-US/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);
 });

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

6 个答案: