在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" );
});