在两个 class i 元素中更改 class 名称

Question

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

   <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() is not correct. You can use .find() and .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 />

Answer 2

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

首先，您甚至可以使用 jQuery toggleClass 而不是必须尝试实施检测然后 class 删除和插入。

所以你最终得到了代码：

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

Answer 3

您正在使用 next() 它 returns 所选元素的下一个同级元素。兄弟元素是共享相同 parent

的元素

您需要使用find()它returns所选元素的后代元素。后代是 child、祖辈child、great-grandchild，等等。

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

here the fiddle

在两个 class i 元素中更改 class 名称

Change class name in two class i element

javascript

jquery

toggleclass