简单的设置显示:无/块与javascript

Simple setting off display: none / block with javascript

本文关键字：块与 javascript 设置 显示 简单      更新时间：2024-03-28

我有以下代码：

<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"单击行

jsfiddle 中的示例

运行代码时打开调试控制台，会收到消息"ReferenceError:showHide未定义"。

如果您将html和javascript放在一个文件中并运行，则该特定问题就会得到解决。这与jsfiddle处理源代码的顺序有关。

其次，您试图通过id获取一个元素，但为其指定类名——这是没有意义的。通过给元素id并使用它就可以了。

但这是非常笨拙的，只是用来解释为什么它不起作用。正如拉斐尔所说，你最好使用jQuery。

编辑：用链接替换html

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

首先，在您的JSFiddle示例中，函数被封装到一个domready事件中。您应该将JavaScript的换行更改为无换行正文。这可以在左栏的第二个下拉列表中进行设置。否则将无法访问您的功能。

然后，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切换文档

我不知道为什么会发生这种情况，但您需要检查css display属性是否设置为none或为空。因此，这将从第一次触发您的函数，否则它将转到"其他"，然后在下次单击时触发。

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

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

相关文章：