为什么我不能使用 xx[this.index].style.display？据说"Cannot read property 'style' of undefinedbtn"

Question

我想在一个循环中制作 xx[this.index] 让每个人都有一个索引，然后当我点击其中的一个按钮时，按钮的背景会变成黄色 & div块会同时改变单词。为什么它不起作用？我看到其他人使用这种方式效果很好。我能怎么做？非常感谢！

这是我的 JSFiddle： http://jsfiddle.net/QCxwr/7

 window.onload=function()
    {
        var btn = document.getElementsByTagName('input');
        var div = document.getElementsByName('div');

        for(var i=0;i<btn.length;i++) {
            btn[i].index = i;
            btn[i].onclick=function() {
                for(var i=0;i<btn.length;i++) {
                    btn[i].className = '';
                    div[i].style.display='none';
                }
                this.className = 'active';
                div[this.index].style.display = 'block';
            };
        }
    };

Answer 1

this 指的是这里的window。除非你在对象 window 上放置一个属性索引（真的不建议），否则这是行不通的。

因此，如果此函数是在对象的方法中执行的，则您必须使用经典技巧：

 var me = this;
 window.onload=function(){
     ...
     div[me.index].style.display = 'block';
 }

Answer 2

您的 DIV 数组为空。您是想使用

getElementsByTagName

而不是

getElementsByName

返回 DIV 时？

此外，您应该在尝试访问之前检查数组长度。

更新代码 http://jsfiddle.net/QCxwr/9/

Answer 3

请查找更新后的 javascript 代码。当您使用 "getElementsByName".

获取时，您的 DIVs 数组为 0

window.onload=function()
        {
            var btn = document.getElementsByTagName('input');
            var div = document.getElementsByTagName('div');

            for(var i=0;i<btn.length;i++) {
                btn[i].index = i;alert
                btn[i].onclick=function() {                
                    for(var i=0;i<btn.length;i++) {
                        btn[i].className = '';
                        div[i].style.display='none';
                    }
                    this.className = 'active'; 
                    div[this.index].style.display = 'block';
                };
            }
        };

为什么我不能使用 xx[this.index].style.display？据说"Cannot read property 'style' of undefinedbtn"

why i can't use xx[this.index].style.display? it's said "Cannot read property 'style' of undefinedbtn"

javascript

for-loop

this

typeerror

getelementsbytagname