使用Javascript类显示/隐藏表行

Question

我有一个桌子，它的膨胀和折叠，但它变得太乱，无法使用它，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>

问题是，我对每一个都使用一个ID，这是非常烦人的，因为我想为每个父级和很多父级都有很多隐藏行，所以要处理的ID太多了。IE和FireFox只显示第一个隐藏行，而不显示其他行。我怀疑发生这种情况是因为我将所有ID触发在一起使其工作。我认为如果我使用类而不是ID来确定隐藏行会更好。

我对所有这些都很陌生，所以请尝试用任何简单的方式来解释它。此外，我尝试了jQuery，但没有得到它。

Answer 1

很难弄清楚您要用这个示例做什么，但实际上您在使用类方面的想法是正确的。我创建了一个JSFiddle来帮助演示一种稍微好一点的方法（我希望）。

这是小提琴：林克。

你所做的，不是与IDs一起工作，而是与类一起工作。在您的代码示例中，有橘子和苹果。我将它们视为产品类别（因为我不知道您的目的是什么），并使用它们自己的ID。因此，我用class=“cat1”或class=“cat2”标记产品S。

我还用一个简单的.toggler类标记链接。在元素本身上具有onclick属性不是一个好的做法。您应该使用JavaScript在页面加载时“绑定”事件。我使用jQuery完成此操作。

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

使用此格式，您将事件处理程序绑定到具有类toggler的链接的click事件。在我的代码中，我将data-prod-cat属性添加到toggler链接中，以指定它们应该控制哪些产品行。（这里解释了我使用data-*属性的原因。您可以谷歌“HTML5数据属性”获得更多信息。）

在事件处理程序中,我执行以下操作：

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

通过这段代码，我实际上试图创建一个类似$('.cat1')的选择器，这样我就可以为特定的产品类别选择行，并更改它们的可见性。我使用$(this).attr('data-prod-cat')this访问用户单击的链接的data-prod-cat属性。我使用jQuery切换函数，这样我就不必编写逻辑，如如果可见，则隐藏元素，否则使其可见就像您在JS代码中所做的那样。jQuery会处理这个问题。toggle函数执行它所说的操作，toggles指定元素的可见性。

我希望这足够说明问题。