Klasse zu einer Schaltfläche hinzufügen/entfernen

Ich habe Probleme beim Hinzufügen einer neuen Klasse zu einer Schaltfläche.Klasse zu einer Schaltfläche hinzufügen/entfernen

Der Knopfpfeil sollte rechts (nach rechts) zeigen, wenn die Seitenleiste geschlossen ist. Und links (Fa-Winkel-links) wieder, wenn es geöffnet ist.

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

    }); 

})();

Quelle

2017-04-07 Rokas

Typo im Code: '$ ("# sidebarToogle i.fa");' Die ID auf dem Element ist 'sidebarToggle'. Mach das ändern und es funktioniert gut. In diesem Sinne stimme ich als Tippfehler ab. –

Paar Dinge, die Sie toggleClass zum Schalten von Klassen verwenden sollte, dann ist es übersichtlicher. Außerdem würde ich den relativen Selektor .find verwenden, so dass Sie mehrere Schaltflächen unterstützen können. Um nur die Frage zu beantworten, haben Sie einen Tippfehler sidebarToggle. Nach dem Reparieren des Tippfehlers funktionierte es.

(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>

Quelle

2017-04-07 19:19:09 Neil

Upvoted für den Austausch von Best Practices sowie für die Behebung des Problems, zu dem das OP befragt wurde. –

Ich muss müde sein ... @ nfn neil, Danke. – Rokas

Ihr Dinkel sidebarToggle falsch -_-

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

Quelle

2017-04-07 19:22:08

Klasse zu einer Schaltfläche hinzufügen/entfernen

Antwort

Verwandte Themen