今天参加了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. MySQL误删数据救命指南

    预防误操作导致文件/数据丢失的建议: 1.欲删除文件时,将rm命令改成mv,可在系统层面将rm命令做个alias(或参考Windows / Mac OSX做法,删除文件时先进回收站).2.删除数据库. ...

  2. 该扩展程序未列在 Chrome 网上应用店中，并可能是在您不知情的情况下添加的

    ＂chrome扩展程序无法启用＂的解决方案 http://www.cnplugins.com/tool/installpluginfix.html win10家庭版没有组策略怎么办? https:// ...

  3. 【2037】利用字符串处理，输出x+y的结果

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 输入两个整数x,y输出它们的和.(0<=x,y<=10的100次幂) [输入] 共2行:   ...

  4. Android 各个版本号WebView

    转载请注明出处   http://blog.csdn.net/typename/ powered by miechal zhao : miechalzhao@gmail.com 前言: 依据Googl ...

  5. python implementation for Qt's QDataStream（看一下QDataStream的结构）

    #!/usr/bin/env python # -*- coding: utf- -*- from __future__ import print_function from __future__ i ...

  6. wPaint在线绘图插件

    wPaint在线绘图插件 一.总结 一句话总结: 1.搜画图插件的时候关键词应该搜什么? jquery画图插件 js画图插件 jquery绘图插件 这些 二.在线绘图插件--wPaint 的实际应用 ...

  7. js判断是否微信客户端

    上周接到个需求,需求是这样的:用户扫一扫二维码会产生一个链接,该链接会向后端发送个请求,返回一个 apk 的下载地址,用户点击下载按钮可以下载此 apk.然后就发生了问题,经过测试,发现用微信扫一扫打 ...

  8. vue相关网站资源收集

    因为接了一个使用VUE + ES6 + Webpack的项目,所以在工作之余,也加紧了对这些知识的学习,这里放上遇到的觉得不错的网站链接: 1 vue官网 https://cn.vuejs.org 2 ...

  9. mui常用功能链接地址

    1.下拉刷新mui.pullToRefresh插件http://ask.dcloud.net.cn/article/12152.打包app权限列表http://ask.dcloud.net.cn/ar ...

  10. html+css+js实现狼吃羊小游戏

    html+css+js实现狼吃羊小游戏 一.总结 一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...