使用＆＃34;这个＆＃34;与另一个外部功能

Question

我想使用jQuery的多个选择器并在其上设置on()，然后使用＆＃34; $(this)＆＃34;实施我需要的东西。这应该是这样的：

$(".one, .two, .three").on("someEvent", function () {
  $(this).something;
});

但是，我想将$(this).something;移动到它自己的函数，类似的东西：

function outSideFunction() {
  $(this).something;
}
$(".one, .two, .three").on("someEvent", function () {
  outSideFunction();
});

但正如你可能理解的那样，这并不是真的有用。是否有一些解决方法，所以我仍然可以在外部函数中使用this？

Answer 1

只需传递你的回调函数名称，然后在函数中自由使用$(this)

function outSideFunction() {
  $(this).css({color: "red"}); // for example 
}

$(".one, .two, .three").on("someEvent", outSideFunction);

以下是其他一些方法：

结合

function outSideFunction() {
  $(this).css({color: "red"});
}

$(".one, .two, .three").bind("click", function(){
  outSideFunction.bind(this)();
  // Other stuff here
});

this作为参数

function outSideFunction( that ) {
  $(that).css({color: "red"});
}

$(".one, .two, .three").on("click", function() {
  outSideFunction(this);
  // Other stuff here
});

$。代理

function outSideFunction() {
  $(this).css({color: "red"});
}

$(".one, .two, .three").on("click", $.proxy(outSideFunction, this.selector));

Answer 2

您可bind this获取值：

function outSideFunction() {
     $(this).something;
}
$(".one, .two, .three").on("click", function () {
     outSideFunction.bind(this)();
});

示例：

＆＃13;

＆＃13;

function outSideFunction() {
	$(this).remove();
}
$(".one, .two, .three").on("click", function () {
	 outSideFunction.bind(this)();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
	Click to remove.
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如何简单地将$(this)作为参数传递：

function outSideFunction(arg) {
   console.log(arg);
}
$(".one, .two, .three").on("someEvent", function () {
   outSideFunction($(this));
});

这是一个简单的实现：jsFiddle