Question

我有一个列表，其中包含fa-3x类，我正在尝试将类fa-3x的所有实例更改为＆＃34; fa-lg＆＃34;当我点击＆＃34;切换按钮开启＆＃34;并且切换按钮应该更改为＆＃34;切换按钮关闭＆＃34;的onClick。我怎么能用jquery做到这一点？

＆＃13;

$(document).ready(function() {
  $("ul.nav li ").click(function() {
    $("li").toggleClass("toggle-button-on").find(".fa-3x").removeClass(".fa-3x").css("border", "3px solid red");

  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-controller="" ng-Click="">
  <ul class="nav">
    <li>
      <a class="toggle-button-on"><i class="fa fa-exchange"></i></a>
    </li>
    <li>
      <a ui-sref="Home" ng-class="">
        <i class="fa fa-home fa-3x"></i>
        <span>Home</span>
      </a>
    </li>
    <li>
      <a ng-class="">
        <i class="fa fa-bar-chart-o fa-3x"></i>
        <span>Work </span>
      </a>
    </li>
    <li>
      <a ui-sref="Music" ng-class="">
        <i class="fa fa-table fa-3x"></i>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a ui-sref="faq">
        <i class="fa fa-faq fa-3x"></i> 
        <span>Faq</span> 
      </a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

我怀疑你只想操作用户点击的LI，而不是全部。因此，您需要使用$(this)而非$(".li")进行更改。

$(document).ready(function() {
  $("ul.nav li ").click(function() {
    $(this).toggleClass("toggle-button-on").find(".fa-3x").removeClass("fa-3x").addClass("fa-lg").css("border", "3px solid red");
  });
  $(".nav").on("click", ".toggle-button-on", function() {
    $(".toggle-button-on").toggleClass("toggle-button-on toggle-button-off");
    $(".nav .fa-3x").toggleClass("fa-3x fa-lg");
  });
  $(".nav").on("click", ".toggle-button-off", function() {
    $(".toggle-button-off").toggleClass("toggle-button-off toggle-button-on");
    $(".nav .fa-lg").toggleClass("fa-lg fa-3x");

  });
});

.fa-3x {
  background-color: yellow;
}
.fa-lg {
  background-color: blue;
}
.toggle-button-on {
  color: green;
}
.toggle-button-off {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-controller="" ng-Click="">
  <ul class="nav">
    <li>
      <a class="toggle-button-on"><i class="fa fa-exchange">toggle</i></a>
    </li>
    <li>
      <a ui-sref="Home" ng-class="">
        <i class="fa fa-home fa-3x">fa </i>
        <span>Home</span>
      </a>
    </li>
    <li>
      <a ng-class="">
        <i class="fa fa-bar-chart-o fa-3x">fa </i>
        <span>Work </span>
      </a>
    </li>
    <li>
      <a ui-sref="Music" ng-class="">
        <i class="fa fa-table fa-3x">fa </i>
        <span>Scenario <br/>Music</span>
      </a>
    </li>
    <li>
      <a ui-sref="faq">
        <i class="fa fa-faq fa-3x">fa </i> 
        <span>Faq</span> 
      </a>
    </li>
  </ul>
</div>

Answer 2

因此，在这种情况下，您尝试更改所有可以执行的实例：

$("toggle-button-on").click(function(){

    $("fa-3x").each(function(){
          $(this).addClass("fa-lg");
           $(this).removeClass("fa-3x");
     }

     $("toggle-button-on").each(function(){
          $(this).addClass("toggle-button-off");
         $(this).removeClass("toggle-button-on");
     }
  }

编辑：修复错字添加onclick事件

Answer 3

您的代码有一些错误：

在li选择器的click事件中，您可以使用$（this）来引用li对象：

$("ul.nav li").click(function() {
$(this).toggleClass

所有类选择器必须具有“。”第一。例：find(".3x-3x")

find方法可以返回一个对象数组，因此必须使用每个迭代器。例：find(".3x-3x").each( function () { $(this).someAction } );

通过这些修复，您的代码必须正常工作。希望它有所帮助。

替换嵌套列表中的类名

3 个答案: