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

JQuery采纳CSS实现DOM显示和隐藏要素的更多相关文章

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. jQuery改变CSS使DIV显示

    HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...

  3. CSS元素的显示与隐藏

    CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...

  4. [CSS]元素的显示与隐藏

    摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...

  5. css中实现显示和隐藏（转）

    CSS中的display和visibility      在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...

  6. CSS——元素的显示与隐藏

    元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的是让一个元素在页面中消失,但是不在文档 ...

  7. JQuery完整验证&密码的显示与隐藏&验证码

    HTML <link href="bootstrap.css" rel="stylesheet"> <link href="gloa ...

  8. Jquery 实现密码框的显示与隐藏【转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069】

    <html> <head>  <script type="text/JavaScript"  src="jQuery-1.5.1.min.j ...

  9. CSS检测窗口大小显示和隐藏内容

    代码不多 用css写的话简单一点 @media (max-width: 1024px) { #hidden { display: none; } } max-width 是要检测的宽度

随机推荐

  1. js导出报表

    原文链接:https://blog.csdn.net/qq_37936542/article/details/78376156 需求:项目中有一个学生签到模块需要导出每天的签到数据,一开始用poi在后 ...

  2. [Ramda] Eliminate Function Arguments (Point-Free Style) with Ramda's Converge

    When doing comparisons inside of functions, you end of relying heavily on the argument passed into t ...

  3. 【9309】求Y=X1/3

    Time Limit: 1 second Memory Limit: 2 MB 问题描述 求Y=X1/3次方的值.X由键盘输入(x不等于0,在整型范围内).利用下列迭代公式计算: yn + 1=2/3 ...

  4. 学maven

    跟着刚哥深入学maven   前言:目前所有的项目都在使用maven,可是一直没有时间去整理学习,这两天正好有时间,好好的整理一下. 一.为什么使用Maven这样的构建工具[why] ① 一个项目就是 ...

  5. ZooKeeper 分布式锁实现原理

    原理 进程需要访问共享数据时, 就在"/locks"节点下创建一个sequence类型的子节点, 称为thisPath. 当thisPath在所有子节点中最小时, 说明该进程获得了 ...

  6. ANR触发原理

    ANR(Application Not responding),是指应用程序未响应,Android系统对于一些事件需要在一定的时间范围内完成,如果超过预定时间能未能得到有效响应或者响应时间过长,都会造 ...

  7. CodeForces 659E New Reform （图的遍历判环）

    Description Berland has n cities connected by m bidirectional roads. No road connects a city to itse ...

  8. boost::any在降低模块之间耦合性的应用

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在开发大型系统中,遵循这样一个原则:模块之间低耦合,模块内高内聚.比如系统中模块有界面模块和算法模块两种,一般是界面模 ...

  9. MyReport报表引擎2.2.0.0新功能

    分组功能添加分组头,分组尾设计支持,支持按字段分组,排序 分组效果 排序效果 新增分组行号函数,用于分组内部独立行号显示 分组行号效果 新增平均函数,用于求平均值统计 支持四则优先运算(用中括号表示, ...

  10. 【14.67%】【codeforces 615D】Multipliers

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...