Mam tabelę z towarami w sklepie z gitarami - każdy wiersz zawiera jeden towar. Każdy rząd (i każdy towar) jest nowy, używany lub wysyłany. Chciałbym, aby użytkownik mógł kliknąć łącze na pasku bocznym UL (klikając opcję Nowy, Używany lub Wady) i mieć tylko wiersze tabeli z tym samym warunkiem. Jeśli więc użytkownik kliknął "Używany", wszystkie wiersze Nowe i Kluci staną się ukryte.Pokazywanie/ukrywanie wierszy tabeli przy pomocy Javascript - czy można zrobić z identyfikatorem - jak zrobić z klasą?
Wykonałem tę pracę z prostym JavaScript, ale używa ona getElementByID, która nie będzie działać dla mnie, ponieważ muszę zidentyfikować TRs z klasami. Więc to jest, gdzie jestem zaskoczony. Nie wiem, jak to zrobić z klasami.
Oto rozwiązanie mam wypracowane do tej pory:
<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>
Powyższy kod działa ok, a jeśli mogę zmusić go do pracy z klas zamiast byłoby rozwiązać mój natychmiastowej potrzeby. Ostatecznie jednak chciałbym to skalować również w przypadku marek - aby użytkownik mógł kliknąć markę i zobaczyć tylko posty tej marki. W takiej sytuacji mogę mieć 20 lub 30 marek w tabeli, więc powyższe nie byłoby idealne. To również ostatecznie zostanie umieszczone w witrynie Wordpress i najlepiej byłoby utworzyć klasy dla każdej marki z metadanych w wordpress i podobnie tworzyć dynamiczne UL zawierające marki, które przełączają się na stół, a także mając rozwiązanie js, które może działać ze zmiennym zestawem zmiennych! Wiem więc, że to, co mam powyżej, nie jest najlepszym podejściem, ale jest to jedyny, którego znam wystarczająco, by spróbować teraz.
Pomoc w wyżej wymienionych przypadkach byłaby najbardziej doceniana - podobnie jak porady dotyczące tego, jak mogę to zrobić bardziej efektywnie, gdy zmierzam w stronę bardziej wymagającego aspektu marki.
EDIT:
Google pomógł mi, a ja mam nowy kierunek - może to rozwiązać mój problem:
<!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>
Gorąco polecam przy użyciu jQuery zamiast zwykłego JavaScript jednak sprawdzić moją odpowiedź na równinie javascript rozwiązanie. – OneOfOne