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)。

仅从列表中获取一次

如果您需要多次列表中的项目，请将其存储在本地变量中。你的循环将成为：

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等于当前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的属性之外，此处理程序中没有源自循环或外部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中的任何异常都会阻止链接形式对点击作出反应。