在jQuery中按下更改更改状态图标

Question

我很难弄清楚如何在按下后更改切换状态。 我正在使用由CSS触发的SVG图标，并且在我的查询脚本中被.addclass调用。 按下切换开关后，它希望将其图标更改为不同的类，从而显示不同的图标。

这是我的剧本

 var state = false;

 $("#toggleslideButton").click(function () {
        if (!state) {
              $('#secondaryPanel').animate({width: "toggle"}, 1000);
              $('#toggleslideButton').addClass( "icon icon-exclamation" );

        state = true;
           }
        else {
              $('#secondaryPanel').animate({width: "toggle"}, 1000);
              $('#toggleslideButton').addClass( "icon icon-close" );

        state = false;
           }
 });

我的HTML

  <aside id="secondaryPanel">
        <section id="portalInformation">test</section>
  </aside>
  <div id="control"><a href="#" id="toggleslideButton" class="icon icon-close"><span>View</span></a></div>

图标将无法正确显示，因为我的本地计算机上正在使用该字体。 但是我想做的是当菜单打开时，我希望切换按钮显示其类图标关闭的图标。 然后，一旦按下切换开关并将菜单向后滑动，我希望切换图标读取类图标的感叹号。 我做错了什么，它不会改变？

Answer 1

jQuery为此提供了一个内置函数： .toggleClass 。

$("#toggleslideButton").click(function () {
    $('#secondaryPanel').animate({width: "toggle"}, 1000);
    $('#toggleslideButton').toggleClass( "icon-close icon-exclamation" );
});