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

Answer 2

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

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

所以你最终得到了代码：

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

Answer 3

您正在使用$rules = [ 'name' => ["regex:/^[A-Za-z\-\']+$/"] ];它返回所选元素的下一个兄弟元素。同级元素是共享同一父级的元素

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

find()

here the fiddle

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

3 个答案: