了解和使用 jQuery 函数中的'this'

Question

我想将一个函数应用于不同的元素——或者更确切地说，应用于创建不同上下文的不同选择器。我如何修改下面的函数来使用$('this')，而不是在getClass函数中指定$('#themes')选择器?

代码:

$('#themes').change(function(e) {
  getClass(this, e); 
});
function getClass() {
  var classToAdd = $('#themes').find('option[value]:selected').map(function() {
    return this.value;
  }).get().join(' ');
  var allClassess = $('#themes').find('option[value]').map(function() {
    return this.value ? this.value : null;
  }).get().join(' ');
  $('#result').removeClass(allClassess).addClass(classToAdd);
}

Answer 1

事件有一个currentTarget属性，这正是你正在寻找的，不需要传递this给它…实际上，只需像这样重新配置绑定:

$('#themes').on('change', getClass);
function getClass (event) {
  var themes = $(event.currentTarget);
  var classToAdd = themes.find('option[value]:selected').map(function() {
    return this.value;
  }).get().join(' ');
  var allClassess = themes.find('option[value]').map(function() {
    return this.value ? this.value : null;
  }).get().join(' ');
  $('#result').removeClass(allClassess).addClass(classToAdd);
}

Answer 2

this操作符与作用域和当前对象是什么有关。如果当前没有对象被选中，那么this将引用document，也称为整个网页。您可以为传递的选择器分配一个新变量，这是一种相当简单的方法来完成您正在做的事情:

('#themes').change(function(event) {
  getClass(this, event);
});
function getClass(elem, e) { //if you pass args into a func, you need to declare them in the prototype
  //elem now represents whatever object you passed it (in this case 'this')
  var classToAdd = elem.find('option[value]:selected').map(function() {
    return this.value;
  }).get().join(' ');
  var allClassess = elem.find('option[value]').map(function() {
    return this.value ? this.value : null;
  }).get().join(' ');
  $('#result').removeClass(allClassess).addClass(classToAdd);
}

另一种选择是使用一个方法或jQuery插件，但是语法比这个函数要复杂一些。在继续使用方法和插件之前，先理解这个函数是如何将对象作为变量接受的。

我希望这对你有帮助!

Answer 3

使用$(this)代替this。
这样你就不需要定义相同的jquery选择器

Answer 4

了解$(this)和this之间的区别是很重要的

$(this) -是一个包含this的jQuery对象，所以当你想要运行任何jQuery函数时，你可以使用$(this)

this -是一个Javascript对象，所以你想使用的任何Javascript函数，你应该在this上使用它。

此外，当使用this时，它是什么取决于如何调用函数。您不需要将this和e传递给getClass函数。当#themes发生变化时，一个简单的$('#themes').change(getClass);将执行该函数，getClass函数中的this关键字将是包含#themes的选择对象，而$(this)将是包含this的jQuery对象。

所以，你可以只使用$(this).find(':selected')，你应该很好。但是，请记住，map函数内部的this关键字指的是正在其上运行map函数的对象(也称为$(this).find(':selected'))