javascript - 使用 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 来帮助演示(我希望)更好的方法。

这是 fiddle :link .

您所做的是，您使用的不是 ID，而是类。在您的代码示例中，有橘子和苹果。我将它们视为具有自己的 ID 的产品类别(因为我真的不知道您的目的是什么)。所以，我把产品标记为<tr>与 class="cat1"或 class="cat2" .

我还用简单的 .toggler 标记链接类(class)。拥有 onclick 不是好习惯元素本身的属性。您应该使用 JavaScript 在页面加载时“绑定(bind)”事件。我使用 jQuery 执行此操作。

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

使用这种格式，您将事件处理程序绑定(bind)到 click类链接事件 toggler .在我的代码中，我添加了一个 data-prod-cat属性为 toggler链接以指定他们应该控制哪些产品行。 (我使用 data-* 属性的原因在 here 中有解释。您可以通过 Google“html5 数据属性”获取更多信息。)

在事件处理程序中，我这样做:

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

使用这段代码，我实际上是在尝试创建一个类似 $('.cat1') 的选择器所以我可以为特定产品类别选择行，并更改它们的可见性。我用 $(this).attr('data-prod-cat')这可以访问 data-prod-cat用户点击链接的属性。我使用 jQuery toggle函数，这样我就不必编写像 if visible, then hide element, else make it visible 这样的逻辑了就像您在 JS 代码中所做的那样。 jQuery 处理这个问题。切换功能按照它说的做 toggle s 指定元素的可见性。

我希望这足以说明问题。