您的位置：首页 > Web前端 > JQuery

JQuery采用CSS实现DOM元素的显示和隐藏 .

2014-10-03 14:55 651 查看
今天参加了一个Code Review活动，看了一个同事的写的代码，感觉满足了当前的功能实现，但是从长远来看，无论从代码复用角度还是维护上看都显得非常差。先看看需求是什么吧。需求是通过下拉框的选择不同的选项，来显示和隐藏一个文本框。同事是这样写的：

Code 1

[html]
view plaincopyprint?

<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>

<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]
view plaincopyprint?

<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>

<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中的代码是否更加简洁，更重要的是它很好的实现了代码复用，以及未来的可维护性。建议大家编写代码的时候多从复用和可维护性上去考虑实现。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航