Question

当我单击它时，我有一个带有“ gmnprint”类的元素，添加了“活动”类，但是当我单击另一个元素时，它仍然存在。

html

<div class="gmnoprint" title="S.A.U.C." style="width: 22px; height: 35px; overflow: hidden; position: absolute; opacity: 0.01; cursor: pointer; touch-action: none; left: -294px; top: 45px; z-index: 80;"></div>
<div class="gmnoprint" title="INC." style="width: 22px; height: 35px; overflow: hidden; position: absolute; opacity: 0.01; cursor: pointer; touch-action: none; left: -288px; top: -116px; z-index: -81;"></div>

jQuery

$(document).ready(function() {
  $('.gmnoprint').click(function() {
    $(this).toggleClass("active");
  });  
});

Answer 1

而不是切换，而是显式添加和删除类。

 $(document).ready(function() {
    $('.gmnoprint').click(function() {
        $('.gmnoprint').removeClass('active');
        $(this).addClass("active");
    });  
    });

Answer 2

首先从所有数学元素中删除该类，然后设置发生点击的活动类。

$(document).ready(function() {
  var $gmnoprint = $('.gmnoprint');
  $gmnoprint.click(function() {
    $gmnoprint.removeClass('active');
    $(this).addClass("active");
  });
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gmnoprint" title="S.A.U.C." style="width: 50px; height: 35px;">Box I</div>
<div class="gmnoprint" title="INC." style="width: 50px; height: 35px;">Box II</div>

Answer 3

$(function() {
  $('.gmnoprint').on('click', function() {
    $('.gmnoprint').removeClass('active');
    $(this).toggleClass("active");
  });
  
});

.active {
  color: #b00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="gmnoprint" title="S.A.U.C.">Click Me</div>

<div class="gmnoprint" title="INC.">Click Me Too</div>

Answer 4

在点击处理程序中，您仅在切换被点击的元素。您还需要重置页面上的其余元素。

$(document).ready(function() {
    $('.gmnoprint').click(function() {
        $('.gmnoprint').removeClass('active');
        $(this).toggleClass("active");
    });  
    });

其他任何元素都将删除该类，并切换已单击的元素。

Answer 5

您可以从所有元素中删除该类，然后将其重新应用于单击的元素。

 $(document).ready(function() {
      $('.gmnoprint').click(function() {
        $('.gmnoprint').removeClass("active");
        $(this).addClass("active");
      });  
 });

提琴：

https://codepen.io/anon/pen/Xxboxz

如果我单击其他课程，请删除“有效”

5 个答案: