javascript - 使用 jquery 父选择器切换 addclass

Question

我在网格中有一些项目产品。我希望当我单击项目中的每个图标时，它将切换类“.active”，并且如果其他项目中的其他图标可见，也会删除类。

到目前为止，这是我的脚本，可以添加从其他项目中删除的类，但是当我单击同一图标时，它不会切换它(删除类)。

$('.items #show-actions').on('click', function(event) {
  event.preventDefault();
  var $this = $(this).parent().parent('.items');
  var $that = $(this).closest('.items');
  $('.items').find('.actions').not($this).removeClass('active');
  $that.find('.actions').toggleClass('active');
});

<ul class="products-grid row">
  <li class="items">
    <a href="somelink" class="product-image"><img src="/images/myimage.png" "/></a>
    <div class="product-info">
      <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
      <h2 class="product-brand">Test</h2>
      <div class="actions text-center hidden">
        <button class="btn-block">Ok</button>
      </div>
    </div>
  </li>
  <li class="items">
    <a href="somelink" class="product-image"><img src="/images/myimage.png" "/></a>
    <div class="product-info">
      <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
      <h2 class="product-brand">Test</h2>
      <div class="actions text-center hidden">
        <button class="btn-block">Ok</button>
      </div>
    </div>
  </li>
</ul>

Answer 1

您需要删除此行:

$('.items').find('.actions').not($this).removeClass('active');

因为在您的函数中，您首先删除该类，然后切换它。在这种情况下，如果该元素已经具有 active 类，则会先将其删除，然后 toggle 会再次添加它(看起来该元素仍然具有 >active 类，因为操作非常快)。我已如上所述删除了该行并添加了一些样式以查看差异，因此这里是工作片段(单击“显示操作”以查看差异):

$('.items #show-actions').on('click', function(event) {
  event.preventDefault();
  var $this = $(this).parent().parent('.items');
  var $that = $(this).closest('.items');
  $that.find('.actions').toggleClass('active');
});

.items #show-actions {
  width: 100vw;
  background-color: royalblue;
  color: white;
}

.active {
  background-color: red;
}

img {
  width: 50px;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
  <li class="items">
    <a href="somelink" class="product-image"><img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" /></a>
    <div class="product-info">
      <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
      <h2 class="product-brand">Test</h2>
      <div class="actions text-center hidden">
        <button class="btn-block">Ok</button>         
      </div>
    </div>    
  </li>
  <li class="items">
    <a href="somelink" class="product-image"><img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" /></a>
    <div class="product-info">
      <span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
      <h2 class="product-brand">Test</h2>
      <div class="actions text-center hidden">
        <button class="btn-block">Ok</button>         
      </div>
    </div>    
  </li>
</ul>