Question

我只是想将一个类添加到我单击的项的父项中，然后在下次单击（切换）时将其删除：

jQuery('.bg').on('click', function(event) {
  let current_target = jQuery(event.currentTarget);
  let current_tooltip = current_target.parents('.tooltip');

  if (!current_target.hasClass('open')) {
    current_tooltip.addClass('open');
  } else {
    current_tooltip.removeClass('open');
  }
});

.bg {
    background-color: black;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tooltip">
  <div class="bg"></div>
</div>

根据我的代码，问题是current_target和current_tooltip或更确切地说，所有内容均保持在状态，即第一次单击时的状态，例如，数据未重置我的下一次点击。

我想念什么？

Answer 1

这应该简化一下：

jQuery('.bg').on('click', function(event) {
  jQuery(event.currentTarget).parents('.tooltip').toggleClass('open'); 
});

toggleClass函数添加或删除一个类。

Answer 2

尝试：

 $(document).on('click', '.bg' , function() {    
     let current_tooltip = current_target.parents('.tooltip');

     if (!current_target.hasClass('open')) {
        current_tooltip.addClass('open');
     } else {
        current_tooltip.removeClass('open');
     }
  });

您可以以这种方式使用，也可以使用DOCUMENT，只要单击一下即可使用。

Answer 3

Yo已将打开类别设置为工具提示，并检查了目标类别。

jQuery('.bg').on('click', function(event) {
  let current_target = jQuery(event.currentTarget);
  let current_tooltip = current_target.parents('.tooltip');

  //if (!current_target.hasClass('open')) {
  if (!current_tooltip.hasClass('open')) {
    current_tooltip.addClass('open');
  } else {
    current_tooltip.removeClass('open');
  }
});

.bg {
    background-color: black;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tooltip">
  <div class="bg"></div>
</div>

为什么我的变量没有在jQuery的第二次点击事件中重置？

3 个答案: