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中的程式碼是否更加簡潔，更重要的是它很好的實現了程式碼複用，以及未來的可維護性。建議大家編寫程式碼的時候多從複用和可維護性上去考慮實現。