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该代码更简洁,更重要的是,它是一个很好的实现代码重用。和未来的可维护性。我建议你写代码的时候多从重用性和可维护性上去考虑实现。