如何使用增量 + 选项(或可见性）在 JavaScript 上实现可见性

how to implement visibility on javascript with incremental + option (or visibility)

本文关键字：可见性 JavaScript 实现 何使用 选项      更新时间：2023-09-26

我想要在我的脚本中有一个增量 + 选项，例如一个接一个的扩展。

假设在单击选项配置 + 后，网络配置将使用另一个 + 选项展开，现在如果我想要另一个输入，我将单击 + 并且邻居配置将被展开。

请不要帮我，我是javascript的新手，提前感谢。

<html>
<h>OPSF Configuration</h>
</br>
<head>
    <script type="text/javascript">
        function defaultconf() {
            var nodes = document.getElementById("d1").getElementsByTagName('*');
            for(var k = 0; k < nodes.length; k++)
            {
                nodes[k].style.visibility ="hidden";
            }
        }
        function options1() {
            var str = arguments[0];
            var nodes = document.getElementById(str).getElementsByTagName('input');
            for(var i = 0; i < nodes.length; i++)
            {
                nodes[i].style.visibility ="hidden";
            }
            var nodes = document.getElementById(str).getElementsByTagName('button');
            var name = document.getElementById(str).getElementsByTagName('label');
            for(var i = 0; i < nodes.length; i++)
            {
                if (nodes[i].style.visibility == "hidden" || name[i].style.visibility == "hidden")
                {
                    nodes[i].style.visibility ="visible";
                    name[i].style.visibility ="visible";
                }
                else
                {
                    nodes[i].style.visibility ="hidden";
                    name[i].style.visibility ="hidden";
                }
            }
        }
        function options() {
            var str = arguments[0];
            var nodes = document.getElementById(str).getElementsByTagName('*');
            for(var i = 0; i < nodes.length; i++)
            {
                if (nodes[i].style.visibility == "hidden")
                    nodes[i].style.visibility = "visible";
                else
                    nodes[i].style.visibility ="hidden";
            }
        }
    </script>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />
<body onload="defaultconf()">
<br/>
<input type="button" value="+" onclick="options('d1')">Optiontional Configurations </td></tr>
<div id="d1">
    <table>
        <br/>
        <tr><td>
                <input type="button" value="+" onclick="options('network')">Network Config
                <div id="network">
                    <table>
                        <tr>
                            <td class="style11" valign=top style="height: 4px">Network</td>
                            <td class="style9" style="height: 4px">
                                <input type="text" value="<?php echo $network?>" name="network" size="2" style="width: 147px">
                            </td>
                        </tr>
                    </table>
                </div>
            </td></tr>

            <tr><td>
                <br/>
                <input type="button" value="+" onclick="options('neighbor')">Neighbor Config
                <div id="neighbor">
                    <table>
                        <tr>
                            <td class="style11" valign=top style="height: 4px">Neighbor IP</td>
                            <td class="style9" style="height: 4px">
                                <input type="text" value="<?php echo $neighbor?>" name="neighbor" size="2" style="width: 147px">
                            </td>
                        </tr>
                    </table>
                </div>
        </td></tr>
    </table>
</div>
</body>
</html>

jquery中的简单解决方案是使用.toggle()来切换子视图。

我也更新了 DOM 结构。

j查询代码： 

$(function() {
   var siblingCounter = 0;
   $('.sub-view').hide();
   $('.main-view').on('click', function() {
      var localCounter = $(this).hasClass('default') ? siblingCounter++ : 0;
      $(this).siblings('.sub-view').eq(localCounter).toggle();
   });
});

现场演示 @ JSFiddle

注意：

  • 如果您使用的是jQuery库，请避免使用普通的javascript编写代码，除非您需要jQuery中不可用的东西[我个人到目前为止还没有遇到]。
  • 使用class选择器应用通用/通用 CSS 样式，而不是创建单独的id选择器样式。 基本上，这将防止跨多个规则集的冗余 CSS 样式
相关文章：