Question

我有以下代码：

<table>
    <tr class="odd"><td>Entry 1</td></tr>
    <tr class="even clickable" onclick="showHide('sub2')"><td>> Entry 2</td></tr>
    <tr class="even" id="sub2">
        <td><ul><li>Information 1</li><li>Information 2</li></ul></td>
    </tr>
    <tr class="odd"><td>Entry 3</td></tr>
    <tr class="even"><td>Entry 4</td></tr>       
</table>

以及以下js：

function showHide(id) {
    var el = document.getElementById(id);
    if( el && el.style.display == 'none')    
        el.style.display = 'block';
    else 
        el.style.display = 'none';
}

用这个css：

tr.odd{
    background-color: #dedede;
}

tr.even{
    background-color: #7ea9ff;    
}

tr.clickable{
    cursor: pointer;
}

tr.clickable:hover{
    color: white;
}

tr[id^="sub"]{
    display: none;
}

有人可以告诉我，为什么它不起作用？我正试图显示/隐藏带有id =“sub2”

的行

example in jsfiddle

Answer 1

运行代码时打开调试控制台，您将收到消息“ReferenceError：showHide is not defined”。

如果您将html和javascript放在文件中并运行该特定问题已解决。它与jsfiddle处理源的顺序有关。

其次，你试图通过id获取一个元素，但是给它类名 - 这没有意义。通过给出元素id并使用它可以工作。

但这非常笨拙，只是解释了为什么它不起作用。 raphael说，你最好使用jQuery。

编辑：replaced html with link

function showHide(id) {
    var el = document.getElementById(id);
    if( el && el.style.display == 'block')    
        el.style.display = 'none';
    else 
        el.style.display = 'block';
}

Answer 2

首先，在您的JSFiddle示例中，该函数被包装到domready事件中。您应该将JavaScript的 wrap 更改为 No wrap-in body 。这可以在左栏的第二个下拉列表中设置。否则，您的功能将无法访问。

然后，JavaScript中的第二行搜索带有ID的元素 - 但您的文档不包含任何ID，它包含类。 document.getElementById只能通过ID找到元素。

我建议您使用jQuery执行此任务。使用jQuery，任务可以像这样解决：

HTML：

<table>
    <tr class="odd"><td>Product 1</td></tr>
    <tr class="trigger"><td>&gt; Product 2</td></tr>
    <tr class="even"><td>&nbsp;&nbsp; Information 1</td></tr>
    <tr class="even"><td>&nbsp;&nbsp; Information 2</td></tr>
    <tr class="odd"><td>Product 3</td></tr>
    <tr class="even"><td>Product 4</td></tr>       
</table>

JavaScript的：

$(document).ready(function() {
    $(".trigger").click(function() {
        $(".even").toggle();
    });
});

JSFiddle

jQuery Toggle Documentation

Answer 3

我不知道为什么要解释这个问题，但是你需要检查css display属性是设置为none还是为空。所以这将从第一次触发你的功能，否则它将转到“else”，然后在下一次点击时触发。

因此，您需要检查以下条件：

if( el && el.style.display === 'none' || el.style.display === '')

简单设置显示：无/使用javascript进行阻止

3 个答案: