for key in key循环显示相同的属性,而不是4个不同的属性

时间:2014-10-29 20:07:50

标签: javascript for-loop key addressbook

我试图在javascript中创建一个地址簿,我遇到的问题是我的对象的属性没有给我我需要的信息。我想要4个不同的属性,而不是4个相同属性的循环。

for循环是一个4 li个列表项的循环,它将从我在对象中的信息中插入。

但我得到EMAIL的所有循环。

希望你明白并且可以帮助我。 这是代码。

    //Contactlist funktion
function Contact(fname, lname, address, email) { 
    this.fname = fname;
    this.lname = lname;
    this.address = address;
    this.email = email;    
}

// Contacts
var tony = new Contact("Tony", "Stark", "Avengers 123", "i.am.ironman@hotmail.com");
var steve = new Contact("Steve", "Rogers", "Avengers 12", "cap.america@hotmail.com");

//All contacts
var contacts = [tony, steve];

// Appending the objects
var body = document.getElementsByTagName('body')[0];
var ul = document.createElement('ul');
body.appendChild(ul);

function theContacts() {
var li = document.createElement('li');

    li.innerHTML = tony.fname + ' ' + stark.lname;
    ul.appendChild(li);
        for (i = 0; i < 4; i++) {
        li = document.createElement('li');

    for (var key in tony) {
        li.innerHTML = key;
    }
        ul.appendChild(li);

    }
}

// Calling the object
theContacts();

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

这将输出所有具有属性的联系人作为嵌套的无序列表。我已经为元素提供了类名,以便于样式化。从var contacts

下面开始
function theContacts() {
    var body = document.getElementsByTagName('body')[0],
        outerUL = document.createElement('ul'),
        length = contacts.length;
    outerUL.className = 'contactlist';
    for (var i = 0; i < length; i++) {
        var cont = contacts[i],
            li = document.createElement('li'),
            ul = document.createElement('ul');
        li.className = 'contact'; li.innerHTML = cont.fname + ' ' + cont.lname;
        ul.className = 'infos';
        for (var key in cont) {
            var info = document.createElement('li');
            info.className = key;
            info.innerHTML = cont[key];
            ul.appendChild(info);
        }
        li.appendChild(ul); outerUL.appendChild(li);
    }
    body.appendChild(outerUL);
}

由于与var li内的theContacts()混淆而导致您遇到的问题。