JQuery采纳CSS实现DOM显示和隐藏要素
今天参加了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显示和隐藏要素的更多相关文章
- css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- jQuery改变CSS使DIV显示
HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...
- CSS元素的显示与隐藏
CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...
- [CSS]元素的显示与隐藏
摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...
- css中实现显示和隐藏（转）
CSS中的display和visibility 在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...
- CSS——元素的显示与隐藏
元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的是让一个元素在页面中消失,但是不在文档 ...
- JQuery完整验证&密码的显示与隐藏&验证码
HTML <link href="bootstrap.css" rel="stylesheet"> <link href="gloa ...
- Jquery 实现密码框的显示与隐藏【转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069】
<html> <head> <script type="text/JavaScript" src="jQuery-1.5.1.min.j ...
- CSS检测窗口大小显示和隐藏内容
代码不多 用css写的话简单一点 @media (max-width: 1024px) { #hidden { display: none; } } max-width 是要检测的宽度
随机推荐
- 解决java中ZipFile解压缩时候的中文路径和乱码问题
JAVA中对jar文件或zip文件解压的时候,能够使用JDK内置的API:JarFile和ZipFile,在windows下解压这2种格式文件的时候,常常报下面错误: Exception in thr ...
- JS冲突解决方法
Prototype jquery 冲突解决: 在页面中同时存在jquery 和 prototype ,当用到 $ 的时候,难免产生冲突,所以一定要区分开来: <script type=&qu ...
- Linux与Windows 10用grub引导教程
前言 去年暑假的时候,写了一篇如何装 Linux 和 Windows 10 双系统的文章发在了简书上,我写这篇文章的原因是当初装双系统确实是折腾了许久,网上也找不到一篇详尽的教程.由于去年对于写教程还 ...
- cocos2d-html5 javascript 通过C++绑定，调用java方法
1.java中的写法 /* * XConnectPlugin.java * * Created on: 2014年4月30日 * Author: lswdonald9@gmail.com */ pac ...
- 【搜索引擎Jediael开发笔记】v0.1完整代码 2014-05-26 15:17 463人阅读 评论(0) 收藏
详细代码请见 E:\Project\[重要]归档代码\SearchEngine归档代码 或 https://code.csdn.net/jediael_lu/jediael/tree/10991c83 ...
- JS和PHP和JAVA的正则表达式的区别（java没有分解符，java中的转义字符是\\）
JS和PHP和JAVA的正则表达式的区别(java没有分解符,java中的转义字符是\\) 一.总结 js正则:var patrn=/^[0-9]{1,20}$/; php正则:$pattern='/ ...
- html5+js压缩图片上传
最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- C#人脸识别
C#百度人脸识别 最近看到一只我家徒儿发来的链接,原来是一堆百度AI的SDK,于是一时兴起就做了一只人脸识别,喵喵喵(●'◡'●) 一.准备工作 首先,当然是下载SDK啦:http://ai.baid ...
- innodb_data_file_path参数误修改解决方法
如果innodb_data_file_path参数被修改乱了,不知道原来值的大小,这样启动是会报错的.知道原来大小方法: 方法一:操作系统下ls -l看到原来大小,直接用ls -l显示的大小,复制即可 ...
- Oracle中的sid与servicename
在平时自己创建库的时候,习惯的将sid与servicename取同名,但是在实际生产中这两个名字很有可能不一致,再使用jdbc连接数据库的url时就需要注意区分了,否则创建不了数据库连接 //serv ...