JQuery采用CSS实现DOM元素的显示和隐藏
来源:互联网 发布:mac airdrop文件在哪 编辑:程序博客网 时间:2024/05/05 10:19
今天参加了一个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中的代码是否更加简洁,更重要的是它很好的实现了代码复用,以及未来的可维护性。建议大家编写代码的时候多从复用和可维护性上去考虑实现。
3 0
- JQuery采用CSS实现DOM元素的显示和隐藏
- JQuery采用CSS实现DOM元素的显示和隐藏 .
- JQuery实现HTML元素隐藏和显示
- 用JQuery+CSS实现form表单的显示和隐藏
- jquery实现元素的隐藏与显示
- jquery控制元素的显示和隐藏
- 【jQuery/CSS】显示或隐藏元素
- jquery dom和css设置元素内容
- JS加jquery实现标签元素的显示或隐藏
- jQuery实现菜单的隐藏和显示
- Jquery实现图片的显示和隐藏
- CSS中元素的隐藏和显示(visibility, display)
- JQuery的toggle函数(元素隐藏和显示的切换)
- jquery,toggle修改元素的显示和隐藏
- jQuery中用来让元素显示和隐藏的函数
- jQuery实现元素交替显示隐藏
- JQuery 隐藏和显示html元素
- jquery实现显示和隐藏
- 程序员如何健康成长?
- 为网站减负,加快访问速度
- 多线程的那点儿事
- Android-ServiceConnection
- fedora下对kernel的简单操作
- JQuery采用CSS实现DOM元素的显示和隐藏
- Java Swing 探索(二)Source-Event-Listener-Adapter 对照表
- Anagrams
- 使用GROUP BY子句进行分组操作
- J2EE系列:Window_Open详解
- 如何删除win7里很多的microsoft 6to4 adapter
- 开源爬虫软件汇总
- delphi 中 ItemIndex表示选中的值的下标
- OpenCV2.3.1和VS2010联合使用的设置