Question

我在网格中有一些商品。我希望当我点击项目中的每个图标时，它会切换一个类＆＃39; .active＆＃39;如果其他项目中的其他项目可见，也会删除该课程。

这是我的脚本到目前为止，可以添加类别删除其他项目，但当我点击相同的图标时，它不会切换它（删除该类）。

＆＃13;

$('.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');
});

＆＃13;

<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>

＆＃13;

Answer 1

您需要删除此行：

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

因为在您的函数中，您首先remove该类，然后toggle它。在这种情况下，如果元素已经有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>

Answer 2

首先，您不能在任何HTML页面上拥有重复的ID。我建议您将＃show-actions更改为类而不是ID。

其次，你的img元素中还有一些额外的引号。

一旦你这样做，这很简单。

$('.show-actions').on('click', function() {
  var items = $('.items');
  
  items.removeClass('active');
  $(this).parent().parent('.items').addClass('active');
  
});

.active {
background-color:red;
}

<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 class="product-image"><img src="/images/myimage.png"/></a>
            <div class="product-info">
                <span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</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 class="product-image"><img src="/images/myimage.png"/></a>
            <div class="product-info">
                <span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
                <h2 class="product-brand">Test</h2>
                <div class="actions text-center hidden">
                    <button class="btn-block">Ok</button>         
                </div>
            </div>    
        </li>
    </ul>

使用jquery父选择器切换addclass

2 个答案: