提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JQuery采纳CSS实现DOM显示和隐藏要素

jQueryCSS 实现 显示 隐藏 dom 要素
2023-09-11 14:21:01 时间

今天参加了Code Review活动。阅读编写代码的同事，感到满足当前功能的实现，但是从长远来看，，无论角度还是从代码重用是来看显然不佳维修点。

有什么需要看的权利。通过选择不同的选项下拉框需求，为了显示和隐藏的文本框。他的同事说：

Code 1

<select  name="select" onChange="disinput(this)">
                <option value="1">1</option>
                <option value="2">2</option>
                </select>
<input type="text" id="text" name="text" style="" value="" />
  
<script type="text/javascript">
    function disinput(obj){
        if(obj.value==2){
            document.getElementById("text").style.display="none";
        }else{document.getElementById("text").style.display="";}
    }
</script>

这样的写法应该是全部JS刚開始学习的人都习惯的思维。依据需求写一个方法实现功能就可以。但我认为假设在另外一个页面也有类似的需求，那么是不是又要把这种方法重写一遍呢，哪一天假设用户要求选择选项1就在文本框中显示XX内容，选择2显示另外的内容，那是不是全部的页面都要又一次改一遍，能不能有更好的方法。这个时候能够考虑用CSS，当然是外部CSS，这里我写了一个样例是将CSS放在页面文件里了，假设实际操作肯定是放在外部CSS其中。

Code 2

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

        $(function () {           
        });

        function changeSel() {
            if ($("#select1").val() == 2) {
                $("#text").addClass("class2");
            } else {
                $("#text").removeClass("class2");
            }
        }
    </script>
    <style type="text/css">
        .class2
        {
           display:none;
        }
    </style>
</head>
<body>
    <select id="select1"  name="select" onChange="changeSel()">
                 <option value="1">1</option>
                 <option value="2">2</option>
                    </select>
    <input type="text" id="text" name="text" style="" value="" />
</body>
</html>

Code 2该代码更简洁，更重要的是，它是一个很好的实现代码重用。和未来的可维护性。我建议你写代码的时候多从重用性和可维护性上去考虑实现。


相关文章