如何select 'this' onclick？

Question

通过触发 onClick 事件，我想 select 附加 onClick 事件的同一元素，以将 class 添加到同一元素。我尝试的是以下内容：

<div class="class1" onClick="TestFunction();">Click</div>
<script>
  function TestFunction() {
    $(this).addClass('active');
  }
</script>

单击 div 后，应将 class "active" 添加到同一元素，结果...

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

但是这不起作用。我想知道 this selector 在这种情况下是否有不同的工作方式。

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

Answer 1

原因是this refers to the global 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');
  });
});

如何select 'this' onclick？

How to select 'this' onclick?

html

javascript

jquery

onclick

this