今天参加了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. Oracle学习(六)：子查询

    1.知识点:能够对比以下的录屏进行阅读 SQL> --子查询所要解决的问题:问题不能一步求解 SQL> --查询工资比SCOTT高的员工信息 SQL> --(1)使用普通方法 SQL ...

  2. jQuery 中 is() 函数常见使用方法

    依据选择器.DOM元素或 jQuery 对象来检測匹配元素集合.假设当中至少有一个元素符合这个给定的表达式就返回true. 假设没有元素符合,或者表达式无效.都返回'false'. '''注意:''' ...

  3. JAVA Concurrent包 中的并发集合类

    我们平时写程序需要经常用到集合类,比如ArrayList.HashMap等,但是这些集合不能够实现并发运行机制,这样在服务器上运行时就会非常的消耗资源和浪费时间,并且对这些集合进行迭代的过程中不能进行 ...

  4. 【codeforces 742B】Arpa’s obvious problem and Mehrdad’s terrible solution

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  5. Tricks（四十九）—— 按 batch 访问越界的解决办法

    使用 min 函数指定访问的最终位置,本质上是增加一个条件判断: done = false; batch_size = 10000; idx = 1; while ~done idx_end = mi ...

  6. 数据结构与算法——常用高级数据结构及其Java实现

    前文 数据结构与算法--常用数据结构及其Java实现 总结了基本的数据结构,类似的,本文准备总结一下一些常见的高级的数据结构及其常见算法和对应的Java实现以及应用场景,务求理论与实践一步到位. 跳跃 ...

  7. [NPM] Create a bash script to replace a complex npm script

    In this lesson we will look at pulling out complex npm scripts into their own external bash scripts. ...

  8. Linux安装.Net core 环境并运行项目

    原文:Linux安装.Net core 环境并运行项目 一 安装环境 1.  从微软官网下载 Linux版本的.NetCoreSdk 2.0 安装包 打开终端: 第一步: sudo yum insta ...

  9. Golang快速入门

    Go语言简介: Golang 简称 Go,是一个开源的编程语言,Go是从2007年末由 Robert Griesemer, Rob Pike, Ken Thompson主持开发,后来还加入了Ian L ...

  10. 【t094】区间运算

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 区间运算是数学的一个领域.在区间运算中,常量和变量并不表示为一个单独.精确的值,而是表示为一个有着上界 ...