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

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) {

  el.addClass('active');

}

然而，这不是一个好的做法。内联事件属性已经过时，现在被认为是不好的做法。实现此目的的更好方法是附加不显眼的事件处理程序。在普通的 JS 中，它看起来像这样：

<div class="class1">Click</div>

document.querySelectorAll('.class1').forEach(el => {

  el.addEventListener('click', function() {

    this.classList.add('active');

  });

});

在 jQuery 中，它看起来像这样：

<div class="class1">Click</div>

jQuery($ => {

  $('.class1').on('click', function() {

    $(this).addClass('active');

  });

});