[解決済み] Javascriptのクラスを使ってテーブルの行を表示/非表示にする

質問

なんとなく展開したり折りたたんだりするテーブルがあるのですが、使い勝手が悪くなってきて、IEやFirefoxではうまく動作しないのですが、どうしたらいいですか？

というわけで、JavaScriptのコードです。

  function toggle_it(itemID){ 
      // Toggle visibility between none and '' 
      if ((document.getElementById(itemID).style.display == 'none')) { 
            document.getElementById(itemID).style.display = '' 
            event.preventDefault()
      } else { 
            document.getElementById(itemID).style.display = 'none'; 
            event.preventDefault()
      }    
  } 

そして、サンプルHTMLです。

<table>
    <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Destination</td>
        <td>Updated on</td>
    </tr>
    <tr>
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#" id="toggle" onClick="toggle_it('tr1');toggle_it('tr2')">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr id="tr1" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr id="tr2" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>100</td>
        <td><a href="#" id="toggle" onClick="toggle_it('tr3');toggle_it('tr4')">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr id="tr3" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr id="tr4" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
</table>

問題は、1つ1つのIDを使っているので、親ごとに隠し行をたくさん作りたいのに、IDが多すぎて処理しきれないので、とても困っていることです。しかもIEとFireFoxは最初のHidden Rowしか表示されず、他のHidden Rowは表示されません。全てのIDを一緒にトリガーして動作させたからこうなるのでは？ IDの代わりにClassを使ってHidden RowをIndetifyすれば良いのではと思うのですが。

私はこのすべてが本当に初めてなので、どんな種類の簡単な方法でもいいので説明してみてください。また、私はjQueryを試してみましたが、それを取得することができませんでした。

どのように解決するのですか？

このサンプルで何をしようとしているのかがわかりにくいのですが、実はクラスを使おうと考えていることは正しいのです。私はJSFiddleを作成し、これを行うための少し良い方法（と私は願っています）を示すのに役立ちます。

以下がそのフィドルです。 リンク .

IDを扱う代わりに、クラスを扱うということです。あなたのコードサンプルでは、OrangesとApplesがあります。私は、それらを商品カテゴリとして扱い（あなたの目的がよくわからないので）、独自のIDを持っています。そこで、私は製品に <tr> を使用しています。 class="cat1" または class="cat2" .

また、リンクのマークはシンプルな .toggler クラスがあります。を持つのは良い習慣ではありません。 onclick 属性は、要素そのものに適用されます。ページロード時にJavaScriptでイベントを'バインド'する必要があります。私はjQueryを使ってこれを実現している。

$(".toggler").click(function(e){
    // you handle the event here
});

この形式では、イベントハンドラを click を持つリンクのイベント toggler . 私のコードでは data-prod-cat 属性に toggler というリンクで、どの商品列を制御するかを指定します。(私が data-* 属性について説明します。 ここで . 詳しくは「html5 データ属性」でググってみてください)

イベントハンドラでは、こんなことをしています。

$('.cat'+$(this).attr('data-prod-cat')).toggle();

このコードで、実際には、以下のようなセレクタを作ろうとしている。 $('.cat1') 特定の商品カテゴリの行を選択し、その可視性を変更することができます。私は $(this).attr('data-prod-cat') にアクセスするためのものです。 data-prod-cat 属性で指定します。私はjQueryの トグル のようなロジックを書く必要がない。 if visible, then hide element, else make it visible JSのコードでやっているようなことは、jQueryが処理してくれます。トグル関数はそのとおりに動作し toggle は、指定された要素の可視性を指定します。

十分な説明になったでしょうか。