Anzeigen/Ausblenden von Tabellenzeilen mit Javascript - kann mit ID umgehen - wie mit Klasse?

Ich habe eine Tabelle, die Waren in einem Guitar Store auflistet - jede Zeile enthält ein Stück Merchandise. Jede Zeile (und jedes Stück Waren) ist entweder Neu, Gebraucht oder Konsignation. Ich möchte, dass ein Benutzer in der Lage ist, auf einen Link in einer Sidebar UL zu klicken (entweder Neu, Gebraucht oder Cons) und nur die Tabellenzeilen der entsprechenden Bedingung sichtbar bleiben. Wenn also ein Benutzer auf "Verwendet" klickt, werden alle Zeilen "Neu" und "Cons" ausgeblendet.Anzeigen/Ausblenden von Tabellenzeilen mit Javascript - kann mit ID umgehen - wie mit Klasse?

Ich habe diese Arbeit mit einigen einfachen JavaScript gemacht, aber es verwendet getElementByID, die nicht für mich arbeiten, weil ich die TRs mit Klassen identifizieren muss. Das ist der Punkt, an dem ich ratlos bin. Ich bin mir nicht sicher, wie ich das mit Klassen machen kann.

Hier ist die Lösung, die ich habe, so weit ausgearbeitet:

<html> 
<head> 



<script> 

function used() { 
    document.getElementById("new").style.display = 'none'; 
    document.getElementById("cons").style.display = 'none'; 
    document.getElementById("used").style.display = ''; 
} 

function news() { 
    document.getElementByClass("new").style.display = ''; 
    document.getElementById("cons").style.display = 'none'; 
    document.getElementById("used").style.display = 'none'; 
} 

function cons() { 
    document.getElementByClass("new").style.display = 'none'; 
    document.getElementById("cons").style.display = ''; 
    document.getElementById("used").style.display = 'none'; 
} 
</script> 


</head> 
<body> 
<span onClick="used();">Used</span><br /> 
<span onClick="news();">New</span><br /> 
<span onClick="cons();">Cons</span><br /><br /> 

<table border="1"> 
<tr id="used"> 
<td>Used</td> 
</tr> 
<tr id="new"> 
<td>New</td> 
</tr> 
<tr id="cons"> 
<td>Cons</td> 
</tr> 
</table> 

</body> 
</html>

Der obige Code funktioniert ok, und wenn ich es mit Klassen arbeiten könnte stattdessen wäre es mein unmittelbares Bedürfnis zu lösen. Letztendlich möchte ich das jedoch auch für Brands skalieren, damit ein Nutzer auf eine Marke klicken und nur die Posts für diese Marke sehen kann. In dieser Situation könnte ich 20 oder 30 Marken in der Tabelle haben, also wäre das oben genannte nicht ideal. Auch dies wird letztlich in einer Wordpress-Website leben, und ich würde idealerweise die Klassen für jede Marke aus Metadaten in WordPress erstellen und in ähnlicher Weise eine dynamische UL mit den Marken, die die Tabelle wechseln, sowie eine js-Lösung, die funktionieren kann mit einem sich ändernden Satz von Variablen! Also weiß ich, dass das, was ich oben habe, nicht der beste Ansatz ist, aber es ist der einzige, den ich genug kenne, um es jetzt zu versuchen.

Hilfe mit den oben genannten würde am meisten geschätzt werden - ebenso wie Ratschläge, wie ich dies effektiver tun könnte, während ich in Richtung der anspruchsvolleren Marken Aspekt bewegen.

EDIT:

Google hat mir geholfen, und ich habe eine neue Richtung - das ist mein Problem lösen könnte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
</style> 


</head> 
<body> 
    <ul class="side-nav"> 
<li><a class="cond" href="#">Show all</a></li> 
<li><a class="used" href="#">Used</a></li> 
<li><a class="new" href="#">New</a></li> 
<li><a class="cons" href="#">Cons</a></li> 

</ul> 

<table> 
<tr class="cond used"> 
<td>A Used Item</td> 
<td>Used.</td> 
</tr> 
<tr class="cond new"> 
<td>A New Item</td> 
<td>New</td> 
</tr> 
<tr class="cond cons"> 
<td>A Cons Item</td> 
<td>Cons</td> 
</tr> 
</table> 
<script> 
$(function() 
{ 
    $('ul.side-nav a').click(function() 
    { 
     $('tr.cond').hide(); 
     $('tr.' + $(this).attr('class')).show();  
    }); 
}); 
</script> 

</body> 
</html>

Quelle

2013-07-08 WilliamAlexander

ich mit jQuery anstelle von einfachen Javascript sehr empfehlen, aber meine Antwort für die Ebene Lösung JavaScript-überprüfen. – OneOfOne

document.getElementsByClassName gibt ein NodeList, nicht ein einziges Element, ich würde empfehlen, entweder jQuery verwenden, da Sie nur so etwas wie $('.new').toggle()

verwenden würde oder wenn Sie wollen Ebene JS try:

function toggle_by_class(cls, on) { 
    var lst = document.getElementsByClassName(cls); 
    for(var i = 0; i < lst.length; ++i) { 
     lst[i].style.display = on ? '' : 'none'; 
    } 
}

Quelle

2013-07-08 01:34:10 OneOfOne

Ich bin total in Ordnung mit jQuery! Ich hätte vielleicht eine Lösung mit jQuery gefunden - schau es mir jetzt an. Ich bin immer noch ratlos, wie ich das später dynamisch umsetzen werde - aber immer einen Schritt nach dem anderen. – WilliamAlexander

Die Art und Weise, wie Sie es tun, scheint in Ordnung, was meinst du dynamisch? wie Ajax? – OneOfOne

Ich baue das in eine Wordpress-Site - die neue Methode, die ich fand, funktioniert in einer Sandbox-Datei, aber es funktioniert nicht in WordPress. Ich habe keine Ahnung warum - ich frage mich, ob du vielleicht eine Idee hast? Hier ist der Link: http: // fretmill.com/category/akustische-gitarren/ – WilliamAlexander

Sie können die Klasse der gesamten Tabelle ändern und die Kaskade in der CSS: http://jsbin.com/oyunuy/1/

Quelle

2013-07-08 03:20:56

JQuery 10.1.2 hat eine schöne Show und verstecken Funktionen, die das Verhalten Sie sprechen einzukapseln. Dies würde Ihnen ersparen, eine neue Funktion zu schreiben oder die CSS-Klassen im Auge zu behalten.

$("new").show(); 

$("new").hide();

w3cSchool link to JQuery show and hide

Quelle

2014-02-07 16:00:22 spartikus

Anzeigen/Ausblenden von Tabellenzeilen mit Javascript - kann mit ID umgehen - wie mit Klasse?

Antwort

Verwandte Themen