Add/remove class to a button

问题

I'm having problem adding new class to a button.

Button arrow should be showing right(fa-angle-right) when sidebar is closed. And left (fa-angle-left) again when it's open.

https://jsfiddle.net/tjkzmvLg/

HTML

 <div>
    <button id="sidebarToggle" class="btn btn-primary btn-sm">
     <i class="fa fa-angle-left"></i>
     </button>
 </div>

(function() {

    var $sidebarAndWrapper = $("#sidebar, #wrapper");
    var $icon = $("#sidebarToogle i.fa");

    $("#sidebarToggle").on("click", function () {
        $sidebarAndWrapper.toggleClass("hide-sidebar");
        if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
            $icon.removeClass("fa-angle-left");
            $icon.addClass("fa-angle-right");
        } else {            
            $icon.addClass("fa-angle-left");
            $icon.removeClass("fa-angle-right");
        }

    });

})();

回答1:

Couple of things, the you should use toggleClass for switching classes, it's more concise. Additionally, I'd use the relative selector .find so that you can support multiple buttons. To only address the question, you did typo sidebarToggle. After fixing the typo it worked.

(function() {
    var $sidebarAndWrapper = $("#sidebar, #wrapper");

    $("#sidebarToggle").on("click", function () {
        $sidebarAndWrapper.toggleClass("hide-sidebar");
        $(this).find("i.fa").toggleClass("fa-angle-left").toggleClass("fa-angle-right");
        
    });
})();

/* minified because I only changed JavaScript */

#main{background-color:#aea9a9;padding:4px;margin:0}#footer{background-color:#808080;color:#eee;padding:8px 5px;position:fixed;bottom:0;width:100%}.headshot{max-width:50px;border:1px solid #808080;padding:3px}.menu{font-size:12px;color:aquamarine}.menu li{list-style-type:none}.menu li.active{font-weight:bold}#sidebar{background:#525050;color:aliceblue;position:fixed;height:100%;width:250px;overflow:hidden;left:0;margin:0;transition:left ease .35s}#sidebar.hide-sidebar{left:-250px;transition:left ease .35s}#wrapper{margin:0 0 0 250px;transition:margin-left ease .35s}#wrapper.hide-sidebar{margin-left:0}

<!-- minified because I only changed JavaScript -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body> <div id="sidebar"> <span id="username"></span> <ul class="menu"> <li class="active"><a asp-controller="App" asp-action="Index">Home</a></li><li><a asp-controller="App" asp-action="About">About</a></li><li><a asp-controller="App" asp-action="Contact">Contact</a></li></ul> </div><div id="wrapper"> <div id="main"> <div> <button id="sidebarToggle" class="btn btn-primary btn-sm"> <i class="fa fa-angle-left"></i> </button> </div><div> <h2>The world</h2><p>This will be a fun website soon!</p><form> <div> <label>Date</label> <input/> </div><div> <label>Location</label> <input/> </div><div><input type="submit" value="Add"/></div></form> </div></div><div id="footer"> <h5> &copy; 2017 The World Ltd.</h5> </div></div><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script type="text/javascript" src="~/js/site.js"></script></body>

回答2:

Your spelled sidebarToggle wrong -_-

var $icon = $("#sidebarToggle i.fa");

来源：https://stackoverflow.com/questions/43285555/add-remove-class-to-a-button

标签

jquery

html

font-awesome