jquery 2つの複数のクラスを切り替える

Question

jqueryで2つの複数のクラスを切り替えることを試みています。私はそれを自分のアイコンからフォントのすばらしいアイコンに変えたいと思っています。それは私がそれを働かせることができない複数のクラスを変更したいときに変更するためにただ一つのクラスで動作します。

jQuery(document).ready(function() { 
 
var $menu = 'icon '+'icon-menu'; 
 
var $close = 'fa '+'fa-close'; 
 

 
$('.icon-toggle-menu').click(function (evt) { 
 
    $('.nav-screen').fadeToggle(); 
 
    $($menu, $close).toggleClass($menu +' '+ $close); 
 
    $('.nav-logo-black').fadeToggle(); 
 
    $('.nav-icons').toggleClass('nav-fixed'); 
 
    $('.nav').toggleClass('nav-padding'); 
 
}) 
 
});

<nav class="nav"> 
 
    <a class="nav-logo-black" href="index.html"> 
 
     <img src="assets/img/logo/forcitx2.png" alt="forcit-logo-banner"> 
 
    </a> 
 
    <ul class="pull-right nav-icons"> 
 
     <li><a class="icon-chat" href="#"><span class="icon icon-message"></span></a></li> 
 
     <li><a class="icon-toggle-menu" href="#"><span class="icon icon-menu"></span></a></li> 
 
    </ul> 
 
</nav>

Answer 1

さて、私はあなたのコードを修正する試みをするつもりです。それはあなたが目指しているものを完全にははっきりしていないにもかかわらず：

$(function() { 
 
    $('.icon-toggle-menu').click(function(evt) { 
 
    //$('.nav-screen').fadeToggle(); Missing in HTML 
 
    $('.icon.icon-menu, .fa.fa-close').toggleClass('icon icon-menu fa fa-close'); 
 
    $('.nav-logo-black').fadeToggle(); 
 
    $('.nav-icons').toggleClass('nav-fixed'); 
 
    $('.nav').toggleClass('nav-padding'); 
 
    }) 
 
});

.icon { 
 
    font-weight: bold; 
 
} 
 

 
.fa.fa-close { 
 
    color: red; 
 
} 
 

 
.icon.icon-menu { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="nav"> 
 
    <a class="nav-logo-black" href="index.html"> 
 
     Logo 
 
    </a> 
 
    <ul class="pull-right nav-icons"> 
 
     <li><a class="icon-chat" href="#"><span class="icon icon-message">Icon chat</span></a></li> 
 
     <li><a class="icon-toggle-menu" href="#"><span class="icon icon-menu">Icon toggle menu (click me)</span></a></li> 
 
    </ul> 
 
</nav>