Wie finde ich die Klasse des Elements in jeder Schleife

Ich versuche, ein Menüsystem zu erstellen, wo ich den Stil des aktiven Seitenelements im Menü ändern kann. Ich verwende eine separate Body-Klasse auf jeder Seite, dann möchte ich durch die li im Menü navigieren und eine Übereinstimmung mit der Body-Klasse finden. Bei diesem Spiel werde ich dem Menüelement den neuen Stil hinzufügen.Wie finde ich die Klasse des Elements in jeder Schleife

Hier ist mein Code so weit.

HTML

<body class="home-state"> 
... 

<div class="menu-left">  
    <ul> 
    <li class="home-state"> 
     <a href="/">Home</a> 
    </li> 
    <li class="work-state"> 
     <a href="/work">Work</a> 
    </li> 
    <li class="services-state"> 
     <a href="/services">Services</a> 
    </li> 
    <li class="about-state"> 
     <a href="/about">About</a> 
    </li> 
    <li class="blog-state"> 
     <a href="//blog.example.com" target="_blank">Blog</a> 
    </li> 
    <li class="shop-state"> 
     <a href="/shop">Shop</a> 
    </li> 
    <li class="contact-state"> 
     <a data-toggle="modal" href="#modal-coworking">Contact</a> 
    </li> 
    <li class="project-state"> 
     <a href="/brief/index">Project brief</a> 
    </li> 
    </ul> 
</div> 

... 
</body>

var bodyClass = $("body").attr('class'); 

$('.menu-left ul li').each(function(){

Erstens: Ich möchte hier das Element der Klasse finden I $(this).attr("class"); verwendet haben, die nicht

var element = $(this);

Zweitens funktionierten: Ich möchte ein verwenden, wenn Anweisung, um zu prüfen, ob die Klasse der bodyClass Spiele

console.log(element);

Last: Wenn es eine Übereinstimmung ich die Klasse .active dem Element li hinzufügen möchten.

});

Quelle

2017-11-24 Anders Kitson

Ist Ihr '' Element garantiert nur eine haben Einzelunterricht? (Ie., * nicht * 'etwas wie class =" home-state big-text "'?) – nnnnnn

Ich bin nur manuell hinzufügen, aber wenn jemand später eine Klasse hinzufügen, würde es den Code zu brechen. Ich dachte daran, den URL-Pfad zu überprüfen und eine Regex zu verwenden, aber lokal muss ich .html zu den Seiten hinzufügen (etwas mit meiner vagabundierenden Maschine zu tun). Wenn ich die URL-Sniffing-Option verwenden würde, würde es auf dem Live-Server nicht funktionieren der Dev und der lokale Server. Ich könnte es durch ID anstelle von Klasse tun, da Sie nur eine ID für ein Element haben können. –

Da Elemente mehrere Klassen haben kann, hatte ich darauf hindeutet, Ihren Körper Elementwechsel eher ein data- Attribut zu verwenden, als eine Klasse zu spezifizieren, was die aktuelle Seite:

<body data-current="home-state">

Dann wird die JS die active Klasse des entsprechenden Menüpunkt hinzuzufügen erforderlich ist einfach:

$("li." + $("body").attr("data-current")).addClass("active")

Sie müssen die Menüelemente, die die in der Frage erwähnten Klassen vergleichen, nicht wiederholen, da Sie das gewünschte li-Element direkt anhand seiner Klasse auswählen können.

Für den Fall, dass das Körperelement keinen data-current Attribut hat dann würde $("body").attr("data-current")undefined zurückkehren, was den Code oben bedeuten würde versucht, ein Element mit $("li.undefined") zu wählen und eine Klasse hinzufügen. Wahrscheinlich Sie keine Elemente mit einer solchen Klasse haben, so dass harmlos sein würde, aber wenn man explizit testen wollte, dass das data-current Attribut vorhanden:

var current = $("body").attr("data-current") 
if (current) { 
    $("li." + current).addClass("active") 
}

Quelle

2017-11-24 02:49:35 nnnnnn

-1

Sie haben das Klickereignis für den Menüeintrag nicht gebunden. Folgen Sie wie unten

var bodyClass = $("body").attr('class'); 
$('.menu-left ul li').on("click", function() { 
var myClass = $(this).attr("class"); 
    alert(myClass); 
});

Geprüft: https://codepen.io/anon/pen/XzYjGY

Quelle

2017-11-24 02:34:34

Ich möchte kein Klickereignis binden. Ich möchte die Seite nach der Klasse für den Körper suchen und sie dann mit der Klasse im Menü verknüpfen, damit sie eine aktive Klasse haben kann. Ich möchte, dass dies beim Laden der Seite geschieht. –

Sie können diese Möglichkeiten in kuppeln, hier ist die einfache Art und Weise zu tun, Dies;

var bodyClass = $("body").attr('class'); 

$("li." + bodyClass).addClass("active")

Sie können auch eine Schleife für diesen verwenden;

var bodyClass = $("body").attr('class'); 

$(".menu-left li").each(function(i, classes) { 
    if (bodyClass === $(this).attr("class")) { 
     $(this).addClass("active") 
    } 
})

werden beide den Job machen.

Quelle

2017-11-24 03:06:44

enter image description here

wie der Kommentar sagte, kann das Element mehr als eine Klasse, so dass Sie sie eins nach dem anderen

überprüfen sollten

Quelle

2017-11-24 03:10:24

Wenn das Element mit der Klasse "menu-left" auch mehr als eine Klasse hat, sollten Sie es ebenfalls überprüfen. Ich empfehle Ihnen, ID anstelle der Klasse –

Willkommen bei Stackoverflow zu verwenden. Es wäre besser, wenn Sie die [How to Answer] (https://stackoverflow.com/help/how-to-answer) Seite für künftige Bemühungen bei Stack-Überlauf auschecken. -Vielen Dank – Momin

Wie finde ich die Klasse des Elements in jeder Schleife

Antwort

Verwandte Themen