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


    今天参加了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该代码更简洁,更重要的是,它是一个很好的实现代码重用。和未来的可维护性。我建议你写代码的时候多从重用性和可维护性上去考虑实现。


  • 相关阅读:
    mysql系列---【如何利用存储过程,造10万条测试数据?】
    sql_视图和函数
    sql的一些知识_数据分组
    sql的一些知识_函数_汇总数据
    sql的一些知识_计算字段
    sql的一些知识_通配符
    sql的一些知识_where
    sql的一些知识_order by
    sql的一些知识
    chardet的使用
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4566876.html
Copyright © 2020-2023  润新知