jQuery裡提供了show()及hide()用來顯示或隱藏元素,另外有toggle()可以用在顯示與隱藏間來回切換,但是我很常用的一個情境是要依據某個條件來決定顯示與否,由於show()、hide()分了兩個函數,而toggle()又是依原來的狀態決定要改成隱藏或顯示,逼得我只好寫成:

//方法1
if (someCondition)
    $("#someDiv").show();
else
    $("#someDiv").hide();
//方法2
$("#someDiv").css("display",
    someCondition ? "block" : "none");

方法1看來太囉嗦累贅,方法2放著現有函數不用,我都覺得不太理想,我老覺得要多個display(true/false)會比較好用。

連續寫了幾次後,心想有這困擾的應不只我一人,或許早有解決方案。終於忍不住去找看看是否我漏了什麼好用的函數,結果發現有人也提出了應加上條件化顯示函數的建議。下一版本的jQuery會不會加入這類函數不可而知,但我學到一個聰明的動態式函數呼叫寫法:

$("#someDiv")[someCondition ? "show" : "hide"]();

Javascript語言的彈性,真叫人嘆為觀止!


Comments

Be the first to post a comment

Post a comment


23 + 10 =