私はギターショップで商品をリストしているテーブルを持っています。各行には1つの商品が入っています。各行（および各商品）は、新規、中古または委託のいずれかです。ユーザーがサイドバーULのリンクをクリックする（New、Used、またはConsをクリックする）ことができ、対応する条件のテーブル行のみが表示されるようにしたいと思います。したがって、ユーザーが「Used」をクリックすると、NewおよびCons行がすべて非表示になります。Javascriptで表の行を表示/非表示 - IDで行うことができます - クラスの操作方法？
私はいくつかの簡単なJavaScriptでこの作業を行っていますが、私はクラスでTRを識別する必要があるので私にとっては役に立ちませんgetElementByIDを使用します。だからこそ私は困ってしまう。私はこのクラスをどのようにしてクラスで動作させるかわかりません。
<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>
上記のコードはうまく動作し、私はそれがクラスで動作するように取得することができれば、代わりにそれは私の即時の必要性を解決するだろう：
は、ここで私は今のところ出て働いてきたソリューションです。しかし、最終的には、これをスケールアップしてBrandsにも使用したいので、ユーザーがブランドをクリックしてそのブランドの投稿だけを見ることができます。そのような状況では、テーブルに20〜30のブランドがあるかもしれないので、上記は理想的ではありません。また、これは最終的にはWordpressのサイトにあり、理想的には、Wordpressのメタデータから各ブランドのクラスを作成し、同様にテーブルを切り替えるブランドを含む動的ULを作成すると同時に、動作可能なjsソリューション変化する変数のセットで！だから私は上記のことが最善のアプローチではないことを知っていますが、私が今すぐ試みるのに十分知っている唯一のものです。
私がより困難なブランドの側面に向かうにつれて、私がこれをより効果的に行う方法についてのアドバイスと同様に、上記を参考にしてください。
EDIT：Googleは私を助け、私は新しい方向性を持っている
- これは私の問題を解決する可能性があります：
<!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>
私は非常しかし、JavaScriptのソリューションプレーンのための私の答えをチェックし、代わりに無地のJavaScriptのjQueryを使用することをお勧めします。 – OneOfOne