Question

我有一个html元素，我想从视图中隐藏，但我无法通过ID访问该元素，因为它没有ID，我无法为其分配ID。它有一个分配给它的类。有没有可能的方法从视图中隐藏这个元素而没有它的id？

Answer 1

某些浏览器中有getElementsByClassName，但它并不像getElementById那样受到广泛支持。请注意，它会生成一个元素数组，而不仅仅是一个元素，因为多个元素可以具有相同的类。

如果您可以为父母分配ID，您可以通过其他方式访问它：

document.getElementById('parent').getElementsByTagName('div')[3] // or whatever

Answer 2

以下html文件包含用于切换，隐藏，按类和ID显示div的代码。通过使用类，可以隐藏一组（组）分区。

<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    /*function to toggle visibility of class*/
            function toggle_visibility(classname) { $("."+classname).toggle(); }
    /*function to hide class*/
            function hide_visibility(classname) { $("."+classname).hide(); }
    /*function to show class*/
            function show_visibility(classname) { $("."+classname).show(); }
    /*function to hide individual div by id*/
            function hide_visibility(classname) { $("#"+classname).hide(); }
    /*function to show individual div by id*/       
            function show_visibility(classname) { $("#"+classname).show(); }
    </script>

</head>

<body>

    <button onclick="toggle_visibility('class1');">Toggle visibility of class 1</button><br/>
    <button onclick="hide_visibility('class1');">Hide class 1</button><br/>
    <button onclick="show_visibility('class1');">Show class 1</button><br/>
    <button onclick="show_visibility('heading1');">Show heading 1</button><br/>
    <button onclick="hide_visibility('heading1');">Hide heading 1</button><br/>

    <div class="class1" id="heading1"><h1>Heading 1</h1></div>
    <div class="class1"><h2>Heading 2</h2></div>
    <div class="class1"><h3>Heading 3</h3></div>
    <div class="class1"><h4>Heading 4</h4></div>
    <div class="class1"><h5>Heading 5</h5></div>
    <div class="class1"><h6>Heading 6</h6></div>

</body>

Javascript：按类名隐藏元素

2 个答案: