Montrer/Cacher les Lignes de la Table avec Javascript peut faire avec ID - comment le faire avec Classe?

J'ai un tableau qui énumère les marchandises dans un Magasin de Guitare - chaque ligne contient un morceau de la marchandise. Chaque ligne et chaque pièce de la marchandise) est soit neuf, d'occasion ou en Consignation. Je voudrais pour un utilisateur d'être en mesure de cliquer sur un lien dans une barre latérale UL (en cliquant sur soit neuf, d'occasion ou Contre) et ont seulement les lignes de la table de la condition correspondante restent visibles. Donc, si un utilisateur clique sur le bouton "Utilisé" toutes les Nouvelles et les Inconvénients des lignes qui allait devenir cachés.

J'ai fait ce travail avec un simple JavaScript, mais il utilise getElementByID qui ne marchera pas pour moi parce que j'ai besoin d'identifier les TRs avec des classes. Donc, c'est là où je obtenir perplexe. Je ne suis pas sûr de la façon de faire ce travail avec les classes.

Voici la solution que j'ai travaillé jusqu'à présent:

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

Le code ci-dessus fonctionne ok, et si je pouvais obtenir pour travailler avec des classes à la place, il permettrait de résoudre mon besoin immédiat. Cependant, en fin de compte, je tiens à grande échelle à utiliser pour les Marques en tant que bien de sorte qu'un utilisateur peut cliquer sur une marque et ne voir que les messages de la marque. Dans cette situation, je pourrais avoir 20 ou 30 marques dans le tableau ci-dessus ne serait pas idéal. Aussi, en fin de compte vivre dans un site WordPress, et j'ai l'idéal serait de créer des classes pour chaque marque de méta-données dans wordpress et, de même, la création d'une dynamique UL contenant les marques qui font basculer la table, ainsi que d'avoir un js solution qui peut fonctionner avec l'évolution de l'ensemble de variables! Donc, je sais que ce que j'ai ci-dessus n'est pas la meilleure approche, mais c'est le seul que je connaisse assez pour l'essayer dès maintenant.

Aider avec le ci-dessus seraient les plus appréciés, comme des conseils sur comment je pourrais le faire plus efficacement que je me dirige vers la plus difficile des Marques d'aspect.

EDIT:

Google m'a aidé, et j'ai une nouvelle direction, cela pourrait résoudre mon problème:

<!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>
Je recommande fortement l'utilisation de jQuery à la place de la plaine Javascript, cependant vérifier ma réponse pour la plaine javascript solution.

OriginalL'auteur WilliamAlexander | 2013-07-08

  1. 15

    document.getElementsByClassName renvoie une NodeList, pas un seul élément, je recommande soit à l'aide de jQuery, puisque vous suffit d'utiliser quelque chose comme $('.new').toggle()

    ou si vous voulez simplement JS essayer :

    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';
    }
}
    Je suis totalement ok avec jquery! En fait je pourrais avoir trouvé une solution avec jquery - regarder maintenant. Je suis toujours à une perte pour la façon dont je vais le mettre en œuvre ce, de façon dynamique plus tard -, mais une étape à la fois, je suppose.
    La façon dont vous êtes en train de faire, il semble bien, que voulez-vous dire de façon dynamique? comme ajax?
    Je suis dans un site wordpress - la nouvelle méthode que j'ai découvert les œuvres dans un bac à sable fichier, mais cela ne fonctionne pas dans wordpress. Je n'ai aucune idée de pourquoi - je me demande si vous pourriez avoir une idée? voici le lien: fretmill.com/category/acoustic-guitars
    Passons! L'ai eu à travailler en déplaçant certaines classes autour de. De travail! Génial. Merci pour l'aide!
    "le document.getElementByClass" ne fonctionne pas pour moi (Safari 10.1.1) et n'apparaît pas dans Flanagan (O'Reilly JavaScript 6e). J'ai suggéré de le remplacer par "document.getElementsByClassName", qui est dans Flanagan et fonctionne.

    OriginalL'auteur OneOfOne

  2. 4

    JQuery 10.1.2 a un beau afficher et de masquer des fonctions qui encapsulent le comportement dont vous parlez. Ce serait vous faire économiser avoir à écrire une nouvelle fonction ou de garder une trace des classes css.

    $("new").show();

$("new").hide();

    w3cSchool lien vers JQuery afficher et masquer

    OriginalL'auteur spartikus

  3. 2

    Vous pouvez changer la classe de l'ensemble de la table et de l'utilisation de la cascade du CSS: http://jsbin.com/oyunuy/1/

    OriginalL'auteur Ilya Streltsyn