今天参加了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. Chromium网页URL载入过程分析

    Chromium在Browser进程中为网页创建了一个Frame Tree之后,会将网页的URL发送给Render进程进行载入.Render进程接收到网页URL载入请求之后,会做一些必要的初始化工作, ...

  2. MyCAT分表初体验

    1.mycat二进制包安装 下载地址:http://dl.mycat.io/ tar -zxvf Mycat-server-1.6.5-release-20180122220033-linux.tar ...

  3. URAL 1542. Autocompletion 字典树

    给你最多10w个单词和相应的频率 接下来最多1w5千次询问 每次输入一个字符串让你从前面的单词中依照频率从大到小输出最多10个以该字符串为前缀的单词 開始把单词建成了字典树 然后每次询问找到全部满足条 ...

  4. 文本处理之可视化wordcloud

    什么是词云 词云又叫文字云,是对文本数据中出现频率较高的“关键词”在视觉上的突出呈现,形成关键词的渲染形成类似云一样的彩色图片,从而一眼就可以领略文本数据的主要表达意思. 准备工作: python开发 ...

  5. 【b602】金明的预算方案

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈 ...

  6. [Javascript] Write a function pipeline

    const _pipe = (f, g) => (...args) => g(f(...args)) export const pipe = (...fns) => fns.redu ...

  7. phpstorm常用快捷键有哪些（图解归类）

    phpstorm常用快捷键有哪些(图解归类) 一.总结 一句话总结: 10.方法参数提示,显示默认参数   解答:--------CTRL+P 13.显示类层级关系图,继承/实现关系   解答:--- ...

  8. C++生成GIF小结

    声明:所有权利保留. 转载必须说明出处:http://blog.csdn.net/cartzhang/article/details/44020175 近来需要把BMP或Kinect的内存图片多张合成 ...

  9. UE4.5.0的Kinect插件(Plugin)---插件使用说明<二>

    声明:所有权利保留. 转载必须说明出处:http://blog.csdn.net/cartzhang/article/details/43563959 一.起因: 写了个UE4的Kinect的插件,结 ...

  10. experiment : 在私有堆和默认进程堆中, 测试能分配的堆空间总和, 每次能分配的最大堆空间

    实验环境: Win7X64Sp1 + vs2008,  物理内存16GB. 实验结论: *  进程堆的最大Size并没有使用完剩余的物理内存    *  每次能分配的最大堆空间接近2M, 不管是私有堆 ...