11

ギター店の商品を一覧表示するテーブルがあります。各行には 1 つの商品が含まれています。各行 (および各商品) は、新品、中古、または委託品です。ユーザーがサイドバーの UL のリンクをクリックし (New、Used、Cons のいずれかをクリック)、対応する条件のテーブル行のみが表示されたままになるようにしたいと考えています。したがって、ユーザーが「使用済み」をクリックすると、すべての新規および短所の行が非表示になります。

私はいくつかの単純な JavaScript でgetElementByIDこれを機能させましたが、TR をクラスで識別する必要があるため、これは機能しません。だから私は困惑するところです。これをクラスで機能させる方法がわかりません。

これまでに私が解決した解決策は次のとおりです。

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

上記のコードは問題なく動作します。代わりにクラスで動作するようにできれば、当面の必要性は解決します。ただし、最終的には、これをスケールアップしてブランドにも使用できるようにしたいと考えています。これにより、ユーザーがブランドをクリックして、そのブランドの投稿のみを表示できるようになります。その状況では、テーブルに 20 または 30 のブランドが含まれる可能性があるため、上記は理想的ではありません。また、これは最終的にWordpressサイトに配置されます。理想的には、wordpressのメタデータから各ブランドのクラスを作成し、同様にテーブルを切り替えるブランドを含む動的ULを作成し、機能するjsソリューションを用意します。変化する変数のセットで！したがって、上記の方法が最善のアプローチではないことはわかっていますが、今すぐ試してみるのに十分な方法はこれだけです。

上記のヘルプをいただければ幸いです。また、より挑戦的なブランドの側面に移行する際に、これをより効果的に行う方法についてのアドバイスもいただければ幸いです。

編集：

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

3 に答える 3

20

document.getElementsByClassName単一の要素ではなく を返します。次のNodeListようなものを使用するだけでよいため、jQuery を使用することをお勧めします。$('.new').toggle()

またはプレーンJSが必要な場合は、次を試してください：

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';
    }
}
于 2013-07-08T01:34:10.440 に答える
7

JQuery 10.1.2 には、話している動作をカプセル化する優れた show および hide 関数があります。これにより、新しい関数を作成したり、css クラスを追跡したりする必要がなくなります。

$("new").show();

$("new").hide();

JQuery の表示と非表示への w3cSchool リンク

于 2014-02-07T16:00:22.473 に答える