在使用jQuery時,我們經常需要切換div的display屬性來實現元素的隱藏和顯示,然而有時候這種操作會出現沖突。
比如說,如果有這樣一段代碼:
$('button').click(function() { if ($('#myDiv').css('display') == 'none') { $('#myDiv').show(); } else { $('#myDiv').hide(); } });
這個代碼塊的作用是,當用戶點擊按鈕時,如果myDiv當前是隱藏狀態,則顯示出來,否則隱藏起來。
然而,如果這個#myDiv本身就有了display屬性的設置,比如在CSS文件中已經設置了:
#myDiv { display: block; }
那么當上述代碼中第一次執行$('#myDiv').css('display')語句時,它將返回'block'而非'none',從而導致后面的邏輯永遠無法執行。
為了避免這種問題,在使用div的display屬性時,要先檢查它是否存在,如:
if ($('#myDiv').length && $('#myDiv').css('display') == 'none') { $('#myDiv').show(); } else { $('#myDiv').hide(); }
這樣做就可以避免因為預設display屬性導致錯誤的判斷,從而保證邏輯的正確性。