今天参加了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. Java文档上传问题设计

    近期公司让做一个文档上传的功能,功能描写叙述大概是这样子滴 书籍名称.书籍定价.书籍封面图片(须要上传).文档内容 (须要上传) .还有其它相关的描写叙述信息. 我的设计  表 A  包括以上字段 , ...

  2. LLRB——红黑树的现代实现

    一.本文内容 以一种简明易懂的方式介绍红黑树背后的逻辑实现2-3-4树,以及红黑树的插入.删除操作,重点在2-3-4树与红黑树的对应关系上,并理清红黑树相关操作的来龙去脉.抛弃以往复杂的实现,而分析红 ...

  3. 关于JavaScript概念的总结

    原文 https://www.jianshu.com/p/1e8d8a691aa8 大纲 1.JavaScript的概念 2.JavaScript 特点 3.JavaScript是弱类型语言 4.Ja ...

  4. JVM调优2

    原文地址:https://blog.csdn.net/sun1021873926/article/details/78002118 一.什么是JVM  JVM是Java Virtual Machine ...

  5. 【35.02%】【codeforces 734A】Vladik and flights

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

  6. Behavioral模式之Memento模式

    1.意图 在不破坏封装性的前提下,捕获一个对象的内部状态.并在该对象之外保存这个状态,这样以后就可将该对象恢复到原先保存的状态. 2.别名 Token 3.动机 有时候有必要记录一个对象的内部状态.为 ...

  7. 怎样把ul li 前面的点去掉

    在li 属性框里 放入 <li style="list-style-type:none;">...<li> 就可以了

  8. TortoiseGit拉取或推送项目提示 HTTP Basic: Access denied fatal: Authentication failed.

      TortoiseGit拉取或推送项目提示 HTTP Basic: Access denied fatal: Authentication failed. 大体意思是,HTTP基本认证失败,访问被拒 ...

  9. codeblocks按c99标准编译c文件的设置

    作者:朱金灿 来源:http://blog.csdn.net/clever101 早上用codeblocks编译一个c文件,出现这样一个编译错误: +'for'+loop+initial+declar ...

  10. 【codeforces 787B】Not Afraid

    [题目链接]:http://codeforces.com/contest/787/problem/B [题意] -水题..题目太吓人 [题解] 只要你在一组里面找到两个数字,它们的绝对值相同,但是正负 ...