Question

我无法理解$(this)，我制作了摇滚，纸张，剪刀和应用jQuery的版本，供用户选择针对计算机的按钮选项。我希望有人可以解释$(this)指的是什么，是btn-primary吗？该函数在下面，如果你需要html，它就在codepen链接中。此外，结果显示在控制台中。

https://codepen.io/anon/pen/VeLWKP

$(".btn-primary").on("click", function () {
    userChoice = $(this).attr("id");
    computerChoice = computerOptions[Math.floor(Math.random() * computerOptions.length)];
    console.log(userChoice, computerChoice);
});

Answer 1

jQuery中的$(this)指的是btn-primary，是的，但不是整个选择器。它具体指的是触发你的匿名函数;也就是说，你点击的按钮，作为jQuery对象。

这是面向对象语言中的常见概念，也许更直观。假设我们有一个类Dog，我们希望有这个类的几个实例：

dog = new Dog('Albert');

然后我们想要一种关于狗的方法：speak，狗会吠叫它自己的名字。该方法可以这样写:(伪代码）

class Dog {

  string name;

  function Dog(name) {
    this.name = name;
  }

  function speak() {
    return "I'm "+ this.name + "! Bark!";
  }

}

最终看起来很像Java。因此，this同样指的是调用范围。因为我们可以拥有许多狗，每只狗都有自己的名字，我们需要一种方便的方法来获得我们的狗。其他语言称之为self。

Answer 2

this指的是事件触发的DOM元素 - 在本例中是单击的DOM元素。它仅指单击的单个元素，而不是所有.btn-primary元素。

通过使用$(this)，我们使用jQuery选择它，有效地包装元素并让我们在其上使用更多的jQuery方法。

Answer 3

这是对调用当前函数的成员的引用。

然后你可以将它包装在jquery函数$（）中，就像你选择另一个选择器一样。

在你所包含的javascript中，你可以简单地使用this.id而不是调用jquery来执行选择器。将您的javascript更改为：

$(".btn-primary").on("click", function () {
    userChoice = this.id;
    computerChoice = computerOptions[Math.floor(Math.random() * computerOptions.length)];
    console.log(userChoice, computerChoice);
});

Answer 4

使用jQuery将事件处理程序附加到元素时，“this”引用该元素（注意 - 它不是包装的jQuery对象，因此在调用attr（）方法之前在$（）中进行额外的包装）

Answer 5

$(this)将引用发生事件的DOM元素。

Answer 6

如果你来自面向对象编程背景，那么有this关键字引用当前对象，调用方法的方式与jquery中引用的$(this)相同发生事件的DOM 例如

$("#submit_button").click(function(){
    console.log($(this).attr('id'));
})

在上面的代码$(this)中引用ID为submit_button的元素，并且代码的结果将在浏览器的控制台中为submit_button，因为我只记录了ID属性当前元素。

但$(this)在类选择器

的情况下非常有用

例如

<!-- Just snippet not complete code -->
<button class='color' id='red'>Red</button>
<button class='color' id='green'>Green</button>
<button class='color' id='blue'>Blue</button>
<script>
$(".color").click(function(){
    console.log($(this).attr('id'));
})
</script>

在上面的代码片段中，$（this）可用于识别从三个按钮中点击的按钮。

我希望$(this)能清除您对$(this)：）

的所有困惑

乐意帮忙！

解释$（this）

6 个答案: