javascript - 更改两个 i 类元素中的类名

Question

我需要在 <i> 中单击更改类元素，它有 2 个类。第一类总是“fa”，第二类总是“fa-minus”或“fa-plus”。我需要将第二类从“减号”更改为“加号”，将“加号”更改为“减号”，具体取决于它已经拥有的类别。你介意帮我吗？现在完全没用

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

Answer 1

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