javascript - toggleClass 函数在此函数中不起作用

Question

我有这个问题，正如标题所说，我不明白为什么toggleClass()不起作用，相反，如果我使用removeClass()或addClass()一切正常。

$('div').on('click', '.fa-exclamation-circle', function(){
      var target = $(this).parent().find('p');
      target.toggleClass("hidden");
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full mb-10 relative">
            <i class="fas fa-unlock w-1/12"></i>
            <input class="transparence-input w-3/4 radius p-1 px-10 relative" type="password" name="password" value="" placeholder="Password" data-parsley-required="true" data-parsley-trigger="focus keyup" data-parsley-required-message="Campo obbligatorio">
            <div class="error-field-icon flex hidden">
              <i class="fas fa-exclamation-circle text-red-800"></i>
              <p class="div-error px-1 absolute text-white lg:text-sm radius h-auto hidden"></p>
            </div>
          </div>

Answer 1

问题是因为您使用 div 作为委托(delegate)事件处理程序的主选择器，并且 DOM 中存在多个嵌套的 div 元素。因此，click 处理程序针对单击的 .fa-exclamation-circle 元素的每个父 div 运行一次。由于示例中有两个，第一次调用 toggleClass() 会删除该类，第二次调用会再次添加该类。

要解决此问题，请使主选择器更加具体，以便仅选择一个父 div:

$('div.items-center').on('click', '.fa-exclamation-circle', function() {
  var target = $(this).parent().find('p');
  target.toggleClass("hidden");
});

.hidden { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full mb-10 relative">
  <i class="fas fa-unlock w-1/12"></i>
  <input class="transparence-input w-3/4 radius p-1 px-10 relative" type="password" name="password" value="" placeholder="Password" data-parsley-required="true" data-parsley-trigger="focus keyup" data-parsley-required-message="Campo obbligatorio">
  <div class="error-field-icon flex">
    <i class="fas fa-exclamation-circle text-red-800">Click me</i>
    <p class="div-error px-1 absolute text-white lg:text-sm radius h-auto hidden">Foo bar!</p>
  </div>
</div>