Question

这是一个工作正常的例子

＆＃13;

$(".multi-select").change(function() {
  $(this).parent().parent().addClass("glow");
} );

＆＃13;

.glow {
    box-shadow: inset 0px 10px 10px 3px rgba(255, 0, 0, 1) !important;
    box-sizing: border-box;
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="slides-containter">
  <div class="slide-container" id="slide_34">
    <div class="zoom-container">
      <span class="zoom-caption">
        <h3>
          <input class="multi-select" id="slide_select_34" name="ids[]" type="checkbox" value="34" />
        </h3>
      </span>
      <img alt="4c730521b21310758a4809d7b56feec5" src="http://foobar.tuxpartei.ch/foobar.png" />
    </div>
  </div>

＆＃13;

但是由于某些原因，如果我尝试将其拆分为某些回调函数，它就不起作用，如

＆＃13;

function glow_it() {
 $(this).parent().parent().addClass("glow");
};


$(".multi-select").change(function() {
 glow_it();   
}

＆＃13;

.glow {
    box-shadow: inset 0px 10px 10px 3px rgba(255, 0, 0, 1) !important;
    box-sizing: border-box;
    display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="slides-containter">
  <div class="slide-container" id="slide_34">
    <div class="zoom-container">
      <span class="zoom-caption">
        <h3>
          <input class="multi-select" id="slide_select_34" name="ids[]" type="checkbox" value="34" />
        </h3>
      </span>
      <img alt="4c730521b21310758a4809d7b56feec5" src="http://foobar.tuxpartei.ch/foobar.png" />
    </div>
  </div>

＆＃13;

我想我应该以某种方式通过它。应该如何做？

提前谢谢。

Answer 1

这是因为当您调用glow_it()函数时，选择器的上下文会丢失，即$(this)不再引用change所在的元素{1}}事件被触发，但它引用的是窗口对象，即$(window)。要解决此问题，请将$(this)作为变量传递给函数：

function glow_it(t) {
    $(t).parent().parent().addClass("oxo");
};

$(".multi-select").change(function() {
    glow_it(this);   
});

p / s：您还遇到语法错误，因为您在)事件的最后一行遗漏了右括号.change()。

请参阅此处的概念验证小提琴：http://jsfiddle.net/teddyrised/h0euqvf0/7/

更新：或者，您可以将glow_it()函数作为.on('change', [handler])中的第二个参数调用，以保留上下文，如@adeneo中的.on()所示。评价：

$(".multi-select").on('change', glow_it);

在jQuery http://jsfiddle.net/h0euqvf0/5/文档中很好地解释了为什么这样做的解释：

当jQuery调用处理程序时，this关键字是对该处理程序的引用事件交付的元素;对于直接绑定的事件这是附加事件和委托事件的元素事件这是一个匹配selector的元素。（请注意this可能如果事件来自a，则不等于event.target descendant element。）从元素创建一个jQuery对象它可以与jQuery方法一起使用，使用$( this )。

请参阅演示：{{3}}

Answer 2

在var中声明你的$（this）并传递参数。

function glow_it(multiSelect ) {
     multiSelect.parent().parent().addClass("oxo");
    };


    $(".multi-select").change(function() {
    var multiSelect = $(this);
     glow_it(multiSelect );   
    )};

Answer 3

另一种选择是使用jquery proxy方法。它允许您定义调用上下文。在这种特殊情况下有点无用，因为你可以使用glow_it作为change处理程序，但是对于其他更好的情况，可能值得提出这个选项

$(".multi-select").change(function() {
    $.proxy(glow_it, this)();
});

Answer 4

除了Terry的回答之外，您还可以在调用函数时使用.call()来定义this的值。

function glow_it() {
    $(this).parent().parent().addClass("glow");
}

$(".multi-select").on('change', function () {
    glow_it.call($(this));   
});

Updated Example

此外，我建议不要使用.parent().parent()，而是使用.closest('h3')：

function glow_it() {
    $(this).closest('h3').addClass("glow");
}

Answer 5

您可以执行以下任一操作：

指定glow_it作为命名处理程序（首选）

$(".multi-select").change(glow_it);

这里，事件对象自动传递给指定的处理程序，方式与传递给匿名处理程序的方式相同。

从匿名处理程序中调用glow_it，以便通知this。

$(".multi-select").change(function(e) {
    glow_it.call(this, e);   
}

养成传递事件对象e的习惯是好的，即使它没有被使用。有一天你会很高兴。

如何将$（this）传递给回调函数

5 个答案: