此:
document.getElementById(selectElements[i].id) != ""
是錯誤的。要檢查是否元素有一個ID,所以簡單地做:
selectElements[i].id != ""
我想指出的是,你可以在這裏和那裏改善代碼:
1個不要寫for
循環這讓length
財產每次迭代,
,而不是做:
for(i = 0, num = selectElements.length; i < num; i++) {
...
}
僅在您預計selectElements
增長或shrin k重新調整財產價值是有意義的,但在這種情況下,您可能不應該編寫for
循環。
2:不要寫nodelist[index]
有關的NodeLists,例如通過getElementsByTagName()
返回的,你不應該寫nodelist[index]
(儘管大多數瀏覽器支持這一點)。標準的DOM方法是item
,所以編寫nodelist.item(index)
代替。
3從列表中只有一次
獲取項目如果您從列表中需要的物品不止一次,將其存儲在一個局部變量。你的循環將成爲:
for(i = 0, selectElement; i < selectElements.length; i++) {
selectElement = selectElements.item(i);
...more code using selectElement...
}
注意在該selectElement
變量聲明爲循環。因爲你不在循環外部使用它,所以在那裏聲明它可以避免混亂,並確保如果移動循環,則移動聲明。
4.第一
最廉價的比較,您寫道:
selectElement.id != "" &&
selectElement.className == "jumpmenu"
這會更快,因爲它是少:
selectElement.className == "jumpmenu" &&
selectElement.id != ""
這可能是輕微如果反向腿改善檢查一個字符串是否爲空,對於字符串爲空的情況,我們甚至不會檢查className
5,不要使用document.getElementById()
如果你已經有了元素
在循環中,你有這樣的:
jumpmenu = document.getElementById(selectElements[i].id);
你基本上是從selectElement
獲取ID並用它來查詢文檔找到....該元素具有和id
相同的當前值selectElement
。因爲在文檔中(或者應該是),因爲你基本上寫了一個完全不必要的句子。和selectElement
指的是同一個對象。
6. onchange處理程序改進
在循環內部指定一個onchange處理程序。您可以通過爲每個循環迭代創建一個新函數來實現。這是處理代碼:
function() {
if(this.options[this.selectedIndex].value != '') {
// Redirect
location.href=this.options[this.selectedIndex].value;
}
}
三樣東西都記在這裏:首先,onChange處理代碼包含此location.href = ...
,可能應該是document.location.href = ...
。
其次,你兩次提及this.options[this.selectedIndex].value
。再次,把它放在一個局部變量中。
第三,this
是指執行此函數時遇到onchange事件的元素。除了this
和this
的屬性外,此處理程序中沒有任何變量來自循環或外部函數initJumpMenus
。你應該簡單地創建了一次,外循環,每次迭代分配給它:
var onchange_handler = function() {
if(this.options[this.selectedIndex].value != "") {
// Redirect
location.href=this.options[this.selectedIndex].value;
}
}
for (...) {
if (...) {
selectElement.onchange = onchange_handler;
}
}
7總結
把他們放在toghether,這是我會怎麼寫呢:
function initJumpMenus() {
var handler = function() {
var value = this.options.item(this.selectedIndex).value;
if(value != "") {
// Redirect
document.location.href = value;
}
}
var selectElements = document.getElementsByTagName("select");
for(var i = 0, num = selectElements.length, selectElement; i < num; i++) {
selectElement = selectElements.item(i);
// Check for the class and make sure the element has an ID
if(selectElement.id != "" &&
selectElement.className == "jumpmenu"
) {
selectElement.onchange = handler;
}
}
}
請勿使用'