如何在单击时选择“此”？

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

原因是函数内部this引用了全局Window对象。您必须传递this给该函数，以便您可以在函数内部引用该函数：.active{  color:green;  font-size: 20px;}<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) {  console.log(this.constructor.name) //Window  $(el).addClass('active');}</script>尽管最好避免内联事件处理程序：$('.class1').click(function(){  $(this).addClass('active');});.active{  color:green;  font-size: 20px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="class1">Click</div>

Answer 2

使用内联处理程序时，调用的函数在元素的范围内运行window，而不是在引发事件的元素范围内运行。要解决这个问题，您可以this作为参数传递：<div class="class1" onClick="TestFunction(this);">Click</div>function TestFunction(el) {&nbsp; el.addClass('active');}然而，这不是一个好的做法。内联事件属性已经过时，现在被认为是不好的做法。实现此目的的更好方法是附加不显眼的事件处理程序。在普通的 JS 中，它看起来像这样：<div class="class1">Click</div>document.querySelectorAll('.class1').forEach(el => {&nbsp; el.addEventListener('click', function() {&nbsp; &nbsp; this.classList.add('active');&nbsp; });});在 jQuery 中，它看起来像这样：<div class="class1">Click</div>jQuery($ => {&nbsp; $('.class1').on('click', function() {&nbsp; &nbsp; $(this).addClass('active');&nbsp; });});