JQuery採用CSS實現DOM元素的顯示和隱藏
阿新 • • 發佈:2019-01-28
今天參加了一個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中的程式碼是否更加簡潔,更重要的是它很好的實現了程式碼複用,以及未來的可維護性。建議大家編寫程式碼的時候多從複用和可維護性上去考慮實現。