如何在点击时选择“这个”？答案

【问题标题】：How to select 'this' onclick?如何在点击时选择“这个”？
【发布时间】：2020-06-29 14:02:47
【问题描述】：

通过触发 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 属性相同的位置。

【问题讨论】：

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

标签： javascript jquery html onclick this

【解决方案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>

【讨论】：

【解决方案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');
  });
});

【讨论】：