时间戳

首页 > 解决方案 > 如何在点击时选择“这个”？

javascript - 如何在点击时选择“这个”？

问题描述

通过触发 onClick 事件，我想选择附加 onClick 事件的相同元素，以向该相同元素添加一个类。我尝试的是以下内容：

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

单击 div 后，应将“活动”类添加到同一元素，从而导致...

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

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

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

标签： javascriptjqueryhtmlonclickthis

解决方案

原因是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>

推荐阅读