Question

我有一个6 p的div。当我按下另一个p时，我开始使用第一个具有“活动”类的p，我希望在被点击的p上删除并添加活动类

这就是我在单击的p上添加了类但没有从其他p中删除的类。

这是我的HTML：

<div class="slider-circles">
   <p id="slide1" class="transparent-circle active"></p>
   <p id="slide2" class="transparent-circle"></p>
   <p id="slide3" class="transparent-circle"></p>
   <p id="slide4" class="transparent-circle"></p>
   <p id="slide5" class="transparent-circle"></p>
   <p id="slide6" class="transparent-circle"></p>

这是我的jquery

$(".slider-circles p").click(function(e){
            e.preventDefault();
            if($(this).hasClass("active")){
                $(this).parent().siblings().removeClass("active");
            }
            $(this).addClass("active"); 
});

Answer 1

尝试抓取最近的.slider-circles并找到类.active的子元素并删除该类。之后，只需将类active添加到当前元素。

$(".slider-circles p").click(function(e){
 e.preventDefault();
 $(".active", $(this).closest(".slider-circles")).removeClass("active");
 $(this).addClass("active"); 
});

DEMO

Answer 2

由于p已经是兄弟姐妹，因此您不应该致电.parent()。

$(".slider-circles p").click(function(e){
     e.preventDefault();
      $(this).addClass('active').siblings().removeClass('active');
});

Answer 3

你只需要一个班轮：

$(".slider-circles p").click(function(e){
    e.preventDefault();
    $(this).addClass("active").siblings().removeClass("active"); 
});

Answer 4

逻辑将是这样的 -

点击p标记
您将从所有active代码

p

您将为p代码

因此，通过这种方式，您将始终拥有干净且简短的代码。

＆＃13;

$(document).ready(function() {
  $('.slider-circles p').click(function() {
    $('.slider-circles p').removeClass('active');
    $(this).addClass('active');
  });
});

＆＃13;

.active {
  background: steelblue;
  color: #fff;
  padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-circles">
  <p id="slide1" class="transparent-circle active">1 Para</p>
  <p id="slide2" class="transparent-circle">2 Para</p>
  <p id="slide3" class="transparent-circle">3 Para</p>
  <p id="slide4" class="transparent-circle">4 Para</p>
  <p id="slide5" class="transparent-circle">5 Para</p>
  <p id="slide6" class="transparent-circle">6 Para</p>
</div>

＆＃13;

Jquery删除类并在单击的元素上添加类

4 个答案:

DEMO