jQuery如何通过onClick选择此选项

Question

通过触发onClick事件，我想选择与onClick事件关联的相同元素，并向该相同元素添加一个类。我尝试了以下内容：

<div class="class1" onClick="TestFunction();">Click</div>

<script>
function TestFunction() {
    $(this).addClass('active');
}
</script>

单击div后，应将“ active”类添加到同一元素，从而导致...

 <div class="class1 active" onClick="TestFunction();">Click</div>

但是它不起作用，所以我想知道在这种情况下，“ this”选择器的工作方式是否不同。

div元素的结构应保持相同，并且函数应与onClick属性保持相同位置。

Answer 1

is this引用函数内部的全局window对象。

您必须将this传递给函数，以便可以在函数内部引用它：

.active{color:green}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1" onClick="TestFunction(this);">Click</div>

<script>
function TestFunction(el) {
    $(el).addClass('active');
}
</script>

Answer 2

[使用内联处理程序时，调用的函数在window元素的范围内运行，而不是引发事件的元素。要解决此问题，您可以将this作为参数传递：

<div class="class1" onClick="TestFunction(this);">Click</div>

function TestFunction(el) {
  el.addClass('active');
}