CSS-js渲染鏈接無用

Question

好的，好了，感謝這里的人們，我想出了我的js代碼中使我的鏈接變得無用的部分是下面粘貼的內容...仍然試圖弄清楚為什么，但是如果有人有任何見識，那就太好了。 ..

function initJumpMenus() {
    // Turns all <select> elements with the 'jumpmenu' class into jump menus
    var selectElements = document.getElementsByTagName("select");
    for( i = 0; i < selectElements.length; i++ ) {
        // Check for the class and make sure the element has an ID
        if( selectElements[i].className == "jumpmenu" &&
            document.getElementById(selectElements[i].id) != ""
        ) {
            jumpmenu = document.getElementById(selectElements[i].id);
            jumpmenu.onchange = function() {
                if( this.options[this.selectedIndex].value != '' ) {
                    // Redirect
            location.href=this.options[this.selectedIndex].value;
                }
            }
        }
    }
}

window.onload = function() {
    initJumpMenus();
}

Answer 1

這個：

document.getElementById(selectElements[i].id) != ""

是錯的。 您要檢查元素是否具有ID，只需執行以下操作：

selectElements[i].id != ""

我想指出的是，您可以在這里和那里改進代碼：

1不要編寫for獲取每次迭代的length屬性的循環，

而是：

for( i = 0, num = selectElements.length; i < num; i++ ) {
    ...
}

僅當您希望selectElements增大或縮小時，才可以重新查詢屬性值，但是在那種情況下，您可能無論如何都不應該編寫for循環。

2：不要寫nodelist[index]

對於節點列表，例如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...
}

請注意for循環中selectElement變量的聲明。 由於不在循環之外使用它，因此在其中聲明它可以避免混亂，並確保如果移動循環，則可以移動聲明。

4.最便宜的比較

你寫了：

selectElement.className == "jumpmenu" &&
selectElement.id != ""

如果您將雙腿倒轉，可以稍微改善一下：

selectElement.id != "" &&
selectElement.className == "jumpmenu"

這樣會更快，因為檢查字符串是否為空的工作量較小，對於那些字符串為空的情況，我們甚至不會檢查className

5如果您已有元素，請不要使用document.getElementById()

在循環內部，您有以下內容：

jumpmenu = document.getElementById(selectElements[i].id);

您基本上是從selectElement獲取ID的，並使用該ID來查詢文檔以查找.... id等於當前selectElement 。 因為id在文檔中是唯一的（或應該是），所以您基本上在寫一個完全不必要的句子。 jumpmenu和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屬性之外， 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小結

綜上所述，這就是我的寫法：

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;
        }
    }
}

Answer 2

檢查錯誤控制台； JS中的任何異常都會停止鏈接表單對點擊的反應。