更改两个class i元素中的类名

Change class name in two class i element

本文关键字：元素 class 两个      更新时间：2023-09-26

我需要在<i>元素中单击更改类，该元素有2个类。第一类总是"fa"，第二类是"fa minus"或"fa plus"。我需要将第二个类从"minus"更改为"plus"，从"plus"更改为"minus"，这取决于它已经有了哪个类。你介意帮我一下吗？现在根本不起作用

   <a href="#!"><div class="menuSlide">Products <i class="fa fa-minus"></i></div></a>
<a href="#!"><div class="menuSlide"> Multimedia <i class="fa fa-plus"></i></div></a><br /><br />
    <script>
        $(".menuSlide").click(function(){
           if($(this).next(".fa").attr("class") == "fa-minus"){
               $(this).next(".fa").removeClass("fa-minus");
               $(this).next(".fa").addClass("fa-plus");
           }
           else{
               $(this).next(".fa").removeClass("fa-plus");
               $(this).next(".fa").addClass("fa-minus");
           }
        });
    </script>

.fa不是.menuSlide的同级元素，而是其子元素，因此.next（）不正确。您可以使用.find（）和.hasClass（）代替：

$(".menuSlide").click(function() {
  if ($(this).find(".fa").hasClass("fa-minus")) {
    $(this).find(".fa").removeClass("fa-minus");
    $(this).find(".fa").addClass("fa-plus");
  } else {
    $(this).find(".fa").removeClass("fa-plus");
    $(this).find(".fa").addClass("fa-minus");
  }
});
.fa-minus:before {
  content: "-";
}
.fa-plus:before {
  content: "+";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#!">
  <div class="menuSlide">Products <i class="fa fa-minus"></i>
  </div>
</a>
<a href="#!">
  <div class="menuSlide">Multimedia <i class="fa fa-plus"></i>
  </div>
</a>
<br />
<br />

这是一个非常基本的用例。您应该检查jQuery hasClass，而不是在属性"class"上使用比较器，因为后者实际上是一个字符串，包含由空白分隔的所有应用类。

首先，您甚至可以使用jQuerytoggleClass，而不必尝试实现检测，然后实现类的移除和插入。

所以你最终得到了代码：

$(".menuSlide").click(function(){
    $(".fa", this).toggleClass("fa-minus fa-plus");
});

如果使用next()，它将返回所选元素的下一个同级元素。同级元素是共享同一父的元素

您需要使用find()，它返回所选元素的子元素。后代是孩子、孙子、曾孙等等

$(".menuSlide").click(function(){
            if($(this).find(".fa").attr("class") == "fa fa-minus"){
              $(this).find(".fa").removeClass("fa-minus");
               $(this).find(".fa").addClass("fa-plus");
           }
           else{
               $(this).find(".fa").removeClass("fa-plus");
               $(this).find(".fa").addClass("fa-minus");
           }
        });

这里是小提琴

相关文章：