今天參加了一個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> |
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> |
新聞熱點
疑難解答
圖片精選