jQuery - Zwischen den einzelnen Klassen wechseln?

Ich arbeite an einer Seitenleiste, die herauskommt und von der linken Seite der Seite. Das Element, das die Seitenleiste wechselt, ist die Schaltfläche für die Navigationsleiste in einer Bootstrap-Navigationsleiste. Ich habe eine <i> innerhalb des <a> Tags, um als ein Symbol zu fungieren und diese zwei umgeben von einem <div> zu haben, um der Klickbereich zu sein. Es sieht so aus:jQuery - Zwischen den einzelnen Klassen wechseln?

Wenn die Sidebar nicht angezeigt wird, ist das Symbol ein Hamburger-Symbol. Wenn die Seitenleiste ausgeblendet wird, ändert sich das Symbol zu einem Linkspfeil und zurück zu einem Hamburger, wenn Sie es schließen.

Ursprünglich ist dies die jQuery, die ich verwendet habe, um das Symbol zu ändern.

$(".sheath-toggle-icon").click(function() { 
    if ($(this).find("i").hasClass("glyphicon-menu-hamburger")) { 
     $("i").switchClass("glyphicon-menu-hamburger", "glyphicon-menu-left"); 
    } else if ($(this).find("i").hasClass("glyphicon-menu-left")) { 
     $("i").switchClass("glyphicon-menu-left", "glyphicon-menu-hamburger"); 
    } 
})

Das war für mich arbeiten gut, bis ich beschloss ich, einen anderen <i> an anderer Stelle auf der Seite für ein anderes Symbol wollte. Was ich entdeckt habe, ist, dass mein Skript auch die Klasse auf diesem Icon änderte, wenn es nur das Icon auf meinem Toggle-Element wechseln sollte. Wie kann ich dieses Skript neu schreiben, um nur die Klassen auf meinem umschaltbaren Element und nicht die anderen <i> Symbole auf meiner Seite zu beeinflussen? Vielen Dank im Voraus für Hilfe.

Quelle

2017-02-24 KeplerIO

Check 'toggleClass' Funktion –

$("i") selects all the icons on your page.

Sie benötigen Code wie folgt neu zu schreiben -

$(".sheath-toggle-icon").click(function() { 
    var icon = $(this).find("i"); 
    if (icon.hasClass("glyphicon-menu-hamburger")) { 
     icon.switchClass("glyphicon-menu-hamburger", "glyphicon-menu-left"); 
    } else if (icon.hasClass("glyphicon-menu-left")) { 
     icon.switchClass("glyphicon-menu-left", "glyphicon-menu-hamburger"); 
    } 
})

Quelle

2017-02-24 23:07:35

dies jetzt zu versuchen. Ich dachte nur, dass .find() nur nach absteigenden Kindern gesucht hat, also bin ich verwirrt, warum es alle "i" s findet. EDIT: Das hat funktioniert wie ein Zauber. Es ist nicht einmal so anders als das, was ich hatte, also verstehe ich es nicht. Aber vielen Dank! – KeplerIO

Mein Code sollte basierend auf der Tatsache funktionieren, dass ich nach "i" s gesucht habe, die die spezifische Klasse hatten. Warum sollte es die anderen ohne diese Klasse finden? – KeplerIO

Dank Tushar Arora für dieses korrigierten Skript

$(".sheath-toggle-icon").click(function() { 
    var icon = $(this).find("i"); 
    if (icon.hasClass("glyphicon-menu-hamburger")) { 
     icon.switchClass("glyphicon-menu-hamburger", "glyphicon-menu-left"); 
    } else if (icon.hasClass("glyphicon-menu-left")) { 
     icon.switchClass("glyphicon-menu-left", "glyphicon-menu-hamburger"); 
    } 
})

Quelle

2017-02-25 00:23:33 KeplerIO

jQuery - Zwischen den einzelnen Klassen wechseln?

Antwort

Verwandte Themen