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不要编写每次迭代都获取length属性的for循环。

取而代之的是：

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

注意selectElement变量在for循环中的声明。由于您不会在循环外使用它，因此在那里声明它可以避免混乱，并确保在移动循环时也会移动声明。

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的元素的....the元素。因为id在文档中是唯一的(或者应该是唯一的)，所以你基本上是在写一个完全不必要的句子。jumpmenu和selectElement指的是同一个对象。

6. onchange处理程序的改进

在循环中，您可以分配一个onchange处理程序。为此，您可以为每个循环迭代创建一个新函数。以下是处理程序代码：

function() {
    if( this.options[this.selectedIndex].value != '' ) {
        // Redirect
        location.href=this.options[this.selectedIndex].value;
    }
}

这里需要注意三件事:首先，onchange处理程序代码包含这个可能应该为document.location.href = ...的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摘要

把所有这些放在一起，我会这样写：

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

检查error控制台；JS中的任何异常都将停止链接对单击的反应。