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中的任何异常都会停止链接表单对点击的反应。