Question

我想在元素上单击时进行简单的类转换，但是当我在点击处理程序中引用$(this)时，它返回jQuery.fn.init {}，而不是像以前那样返回被单击的元素。我当然想念什么，但我不知道。

const $uspElements = $('.pd-hero__usp');
if ($uspElements.length > 0) {
  $(document).on('click', '.pd-hero__usp', () => {
    console.log($(this)); // outputs: jQuery.fn.init {}

    // Remove active state from all usps
    $uspElements.removeClass('pd-hero__usp--active');

    // add active state to clicked usp (not working)
    $(this).addClass('pd-hero__usp--active');
  });
}

HTML看起来像这样：

<div class="pd-hero__usp pd-hero__usp--active">
  <div class="pd-hero__usp-icon">
    <svg class="list-point__icon list-point__iconplate" width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">[...]</svg>
  </div>
  <div class="pd-hero__usp-text">
    Text 1
  </div>
</div>
<div class="pd-hero__usp">
  <div class="pd-hero__usp-icon">
    <svg class="list-point__icon list-point__iconplate" width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">[...]</svg>
  </div>
  <div class="pd-hero__usp-text">
    Text 2
  </div>
</div>

Answer 1

您应该使用function而不是()=>

const $uspElements = $('.pd-hero__usp');
if ($uspElements.length > 0) {
  $(document).on('click', '.pd-hero__usp', function() {
    console.log($(this)); // outputs: jQuery.fn.init {}

    // Remove active state from all usps
    $uspElements.removeClass('pd-hero__usp--active');

    // add active state to clicked usp (not working)
    $(this).addClass('pd-hero__usp--active');
  });
}

jQuery .on() API Documentation

Answer 2

Arrow functions

箭头函数表达式的语法比函数表达式短，并且没有自己的this，arguments，super或new.target。

从上面看，由于箭头功能没有自己的this，因此可以改用event.currentTarget：

const $uspElements = $('.pd-hero__usp');
if ($uspElements.length > 0) {
  $(document).on('click', '.pd-hero__usp', (event) => {
    console.log(event.currentTarget); 

    // Remove active state from all usps
    $uspElements.removeClass('pd-hero__usp--active');

    // add active state to clicked usp (not working)
    $(this).addClass('pd-hero__usp--active');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pd-hero__usp pd-hero__usp--active">
  <div class="pd-hero__usp-icon">
    <svg class="list-point__icon list-point__iconplate" width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">[...]</svg>
  </div>
  <div class="pd-hero__usp-text">
    Text 1
  </div>
</div>
<div class="pd-hero__usp">
  <div class="pd-hero__usp-icon">
    <svg class="list-point__icon list-point__iconplate" width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">[...]</svg>
  </div>
  <div class="pd-hero__usp-text">
    Text 2
  </div>
</div>

Answer 3

使用function（）代替（）=>箭头函数

const $uspElements = $('.pd-hero__usp');
if ($uspElements.length > 0) {
  $(document).on('click', '.pd-hero__usp', function(){
    

    // Remove active state from all usps
    $uspElements.removeClass('pd-hero__usp--active');

    // add active state to clicked usp (not working)
    $(this).addClass('pd-hero__usp--active');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pd-hero__usp pd-hero__usp--active">
  <div class="pd-hero__usp-icon">
    <svg class="list-point__icon list-point__iconplate" width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">[...]</svg>
  </div>
  <div class="pd-hero__usp-text">
    Text 1
  </div>
</div>
<div class="pd-hero__usp">
  <div class="pd-hero__usp-icon">
    <svg class="list-point__icon list-point__iconplate" width="56" height="56" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg">[...]</svg>
  </div>
  <div class="pd-hero__usp-text">
    Text 2
  </div>
</div>

Answer 4

您必须使用以下代码使用元素$ uspElements而不是定向到文档才能在代码中获取此上下文。

const $uspElements = $('.pd-hero__usp');
if ($uspElements.length > 0) {
  $uspElements.on('click', () => {
    console.log($(this)); 

    // Remove active state from all usps
    $(this).removeClass('pd-hero__usp--active');

    // add active state to clicked usp (not working)
    $(this).addClass('pd-hero__usp--active');
  });
}

jQuery：点击处理程序中的“ $（this）”未定位被点击元素

4 个答案: