zoukankan      html  css  js  c++  java
  • 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该代码更简洁,更重要的是,它是一个很好的实现代码重用。和未来的可维护性。我建议你写代码的时候多从重用性和可维护性上去考虑实现。


  • 相关阅读:
    java+selenium+testNG+excel 实现 web 网页的自动化测试
    LoadRunner测试下载功能点脚本(方法一)
    学习ajax总结
    多行文本溢出 省略号显示
    angular 中表单验证的探索
    关于ngModelOptions用法总结 让校验不过的验证绑定ngModel
    柯里化学习
    call、aply、bind的常用方法总结
    为什么我获取不到这个css样式?js原生获取css样式总结
    文本溢出省略号显示时,水平位置发生偏移
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4566876.html
Copyright © 2011-2022 走看看