Javascript 如何选择'；这'；onclick？

通过触发onClick事件，我希望选择onClick事件附加到的同一元素，以便向该元素添加一个类。我尝试了以下几点：

点击
函数TestFunction（）{
$（this.addClass（'active'）；
}

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

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

点击

然而，这不起作用。我想知道在这种情况下，

此

选择器的工作方式是否不同

div元素的结构应该保持不变，函数也应该保持在onClick属性上的位置。

原因是函数中的全局对象

您必须传递到函数，以便在函数中引用：

.active{
颜色：绿色；
字体大小：20px；
}

点击
函数测试函数（el）{
console.log（this.constructor.name）//窗口
$（el）.addClass（“活动”）；
}

原因是指函数中的全局对象

您必须传递到函数，以便在函数中引用：

.active{
颜色：绿色；
字体大小：20px；
}

点击
函数测试函数（el）{
console.log（this.constructor.name）//窗口
$（el）.addClass（“活动”）；
}

使用内联处理程序时，调用的函数在

窗口

元素的范围内运行，而不是引发事件的元素。要解决此问题，您可以将此作为参数传递：

点击

功能测试功能（el）{
el.addClass（“活动”）；
}

然而这不是好的做法。内联事件属性已经过时，现在被认为是不好的做法。实现这一点的更好方法是附加不引人注目的事件处理程序。在纯JS中，它将如下所示：

点击

document.querySelectorAll（'.class1'）.forEach（el=>{
el.addEventListener（'click'，函数（）{
this.classList.add（'active'）；
});
});

在jQuery中，它将如下所示：

点击

jQuery（$=>{
$（'.class1'）。在（'click'，function（）上{
$（this.addClass（'active'）；
});
});

使用内联处理程序时，调用的函数在

窗口

元素的范围内运行，而不是引发事件的元素。要解决此问题，您可以将此作为参数传递：

点击

功能测试功能（el）{
el.addClass（“活动”）；
}

然而这不是好的做法。内联事件属性已经过时，现在被认为是不好的做法。实现这一点的更好方法是附加不引人注目的事件处理程序。在纯JS中，它将如下所示：

点击

document.querySelectorAll（'.class1'）.forEach（el=>{
el.addEventListener（'click'，函数（）{
this.classList.add（'active'）；
});
});

在jQuery中，它将如下所示：

点击

jQuery（$=>{
$（'.class1'）。在（'click'，function（）上{
$（this.addClass（'active'）；
});
});

请注意，您的原始代码与jQuery事件处理无关，因此我编辑了标题说明您的原始代码与jQuery事件处理无关，因此我编辑了标题