Zugriff/Bearbeitung eines HTML-Elements ohne Verwendung der ID

Question

Ich habe ein Menüelement und ich möchte die BG-Farbe des Menüelements ändern, auf das wir klicken, indem Sie eine Klasse darauf setzen. Ist es möglich, dies zu tun, ohne eine ID-Referenz zu verwenden? zB: wenn ich auf Menü 4 klicke, sollte die Funktion eine Klasse auf li setzen.

<ul class="navList"> 
    <li onclick="setActive();">menu 1</li> 
    <li onclick="setActive();">menu 2</li> 
    <li onclick="setActive();">menu 3</li> 
    <li onclick="setActive();">menu 4</li> 
    <li onclick="setActive();">menu 5</li> 
</ul> 

Answer 1

Bind das Ereigniselement UL und das Ziel zugreifen LI mit event.target

In jQuery aber es ist einfach und kann wie folgt erfolgen:

$(".navList").on("click", "li", function() { 
    $(".navList li").removeClass("bgColor"); 
    $(this).addClass("bgColor"); 
}); 

Kasse unter die jsFiddle Links sowohl für jQuery und nicht-jquery Implementierung:

Nicht jquery Version (Vanille js): https://jsfiddle.net/bkf8k4fq/1/

jQuery-Version: https://jsfiddle.net/bkf8k4fq/2/

Answer 2

prüfen Snippet

function setActive (obj) { 
 
    obj.style.background="red"; 
 
}

<ul class="navList"> 
 
    <li onclick="setActive(this);">menu 1</li> 
 
    <li onclick="setActive(this);">menu 2</li> 
 
    <li onclick="setActive(this);">menu 3</li> 
 
    <li onclick="setActive(this);">menu 4</li> 
 
    <li onclick="setActive(this);">menu 5</li> 
 
</ul>

Answer 3

Pass this (das dem aktuellen Element verweist) in Ihre setActive Funktion. Von dort können Sie die Referenz in Ihrer Funktion verwenden, um die Hintergrundfarbe zu setzen (jetzt als obj bekannt):

function setActive(obj) { 
    obj.style.backgroundColor = 'blue'; 
} 

Die li:

<li onclick="setActive(this);">menu 1</li> 

Answer 4

Viele Möglichkeiten, ich zeigen ein Hand voll:

// you used onclick attribute - which is bad practice for js and messes up the html part, better go for: 
 
document.getElementById("l").addEventListener(
 
    "click", function() { 
 
    clickCalledFunction(this); 
 
    } 
 
); 
 

 
function clickCalledFunction(t) { 
 
    event.preventDefault();//don't do return false but prevent the link following href 
 

 
    var tag=document.getElementsByTagName("a"); 
 
    alert("byTagName: " + tag + " " + tag[0].innerHTML); 
 
    tag[0].textContent="counting: 1";//textContent will be updated late 
 
    
 
    var c=document.getElementsByClassName("link"); 
 
    alert("byClassName: " + c[0].innerHTML); 
 
    //c[0].textContent="counting: 2"; 
 
    
 
    var name=document.getElementsByName("anchor"); 
 
    alert("byName: " + name[0]); 
 
    //name[0].textContent="counting: 3"; 
 
    
 
    alert("byEventMember: " + t.innerHTML) 
 
    
 
    alert(t.href); 
 
    // now do the link yourself maybe: 
 
    //window.location.href=t.href; 
 
}

<a href="#" id="l" class="link" name="anchor">cleck me</a>