循环访问对象数组

Question

我正在循环访问一个对象数组，并想知道为什么在此实例中选择了第二个对象？我正在学习JavaScript，我知道这可能很简单，我只是无法弄清楚。

JS：

(function() { 
    var students = [{ 
     name: "Walker", 
     address: { 
      street: "123 South Drive", 
      city: 'Sarasota', 
      state: 'FL' 
     }, 
     gpa: [3.0, 3.4, 3.8] 
    }, { 
     name: "Christian", 
     address: { 
      street: "5601 Pebble Beach Ln", 
      city: 'Sacromento', 
      state: 'CA' 
     }, 
     gpa: [2.5, 3.6, 3.8] 
    }]; 
    console.log(students); 
    var domElement = function (inner, address) { 
     var name = document.getElementById('name'); 
     var add = document.getElementById('address'); 
     name.innerHTML = inner; 
     add.innerHTML = address; 
    };; 
    for (i = 0; i < students.length; i++) { 
     //console.log(students[i].name); 
     domElement("name: " + students[i].name, students[i].address.city + ' ' + students[i].address.state); 
    } 
})(); 

HTML：

<div id="form_box"> 
<div id="contact-form"> 
    <p class="heading">Display Students Information Below:</p> 
    <div id="form-box">      

      <div id="output"> 
       <div id="name"> 
        <p>Hello</p> 
       </div> 
       <div id="address"> 
        <p></p> 
       </div> 
       <div id="gpa"> 
        <p></p> 
       </div> 
       <div id="date"> 
        <p></p> 
       </div> 
       <div id="gpaavg"> 
        <p></p> 
       </div> 
       <div id="phone"> 
        <p></p> 
       </div> 
       <!-- <div class="clear"></div> --> 
      </div> 

      <div id="info_box"> 
       <div id="info_btn"> 
        <h4 id="round" class="heading">Click To See Next Student</h4> 
        <a id="button" href="#" class="buttonred">Next</a> 
       </div> 
      </div> 
    </div>   
    <div class="clear"></div> 
</div> 
</div> 

<script src="js/main.js"></script> 

Answer 1

我认为这两者都选的，但第二个覆盖的第一个第一个把它的内容之后。要显示只是把

如果你想显示你可以删除的第一个和刚才插入学生的价值

[0]

Answer 2

我可能只是没有看到的东西第一个，而不是（可能在main.js中），但我没有看到任何类型的点击处理程序。

我看到的只是一个循环，它会将各个div的内容更改为数组结构中定义的值。基本上，从我偶尔看到的一点是，循环将执行，当循环完成时，div将被数组中的最后一名学生填充。

对于短暂的时刻（太快看不到），div将充满来自第一个的数据，但它很快被第二个数据覆盖。

编辑：在更多地看着它之后，我确定我的解释就是发生了什么。

我成立了一个的jsfiddle将告诉您发生了什么，一点点，如果你打开你的开发者控制台.. http://jsfiddle.net/deajH/

我只是注释掉你的console.log所以你可以看到它执行：

for (i = 0; i < students.length; i++) { 
    console.log(students[i].name); 
    domElement("name: " + students[i].name, students[i].address.city + ' ' + students[i].address.state); 
} 

你会看到两个名字都去控制台（就像你的循环被设计）。

---

您将需要一个函数充当您的“显示下一个”选项中的点击处理程序。您可以在链接上保留一个跟踪当前索引的属性，然后每次点击链接时增加该值。

当页面完成加载时，可以触发click处理程序调用的函数，以使用第一名学生的数据初始化字段。

Answer 3

这不是一个使用的对象，而是使用了所有的对象。来自每个对象的数据将被放入元素中，并且每个对象将覆盖前一个对象的数据。

不是循环遍历所有对象，而是跟踪要使用哪一个对象。最初显示第一个，并在点击按钮时切换到下一个。

(function() { 

    var students = [{ 
    name: "Walker", 
    address: { 
     street: "123 South Drive", 
     city: 'Sarasota', 
     state: 'FL' 
    }, 
    gpa: [3.0, 3.4, 3.8] 
    }, { 
    name: "Christian", 
    address: { 
     street: "5601 Pebble Beach Ln", 
     city: 'Sacromento', 
     state: 'CA' 
    }, 
    gpa: [2.5, 3.6, 3.8] 
    }]; 

    function domElement (inner, address) { 
    var name = document.getElementById('name'); 
    var add = document.getElementById('address'); 
    name.innerHTML = inner; 
    add.innerHTML = address; 
    }; 

    function showStudent(i) { 
    domElement("name: " + students[i].name, students[i].address.city + ' ' + students[i].address.state); 
    } 

    var i = 0; 
    showStudent(i); 
    i = (i + 1) % students.Length; 

    $('#button').click(function(){ 
    showStudent(i); 
    i = (i + 1) % students.Length; 
    }); 

})(); 

Answer 4

DEMO

我看不到任何点击处理程序在你的代码，并且for循环会真的该循环，你会看到在逻辑上一次迭代。

尝试用：

(function() { 

    var students = [{ 
     name: "Walker", 
     address: { 
      street: "123 South Drive", 
      city: 'Sarasota', 
      state: 'FL' 
     }, 
     gpa: [3.0, 3.4, 3.8] 
    }, { 
     name: "Christian", 
     address: { 
      street: "5601 Pebble Beach Ln", 
      city: 'Sacromento', 
      state: 'CA' 
     }, 
     gpa: [2.5, 3.6, 3.8] 
    }]; 

    var c = 0; 
    function getStudentData(ev) { 
     ev.preventDefault(); 
     document.getElementById('name').innerHTML = students[c].name; 
     document.getElementById('address').innerHTML = students[c].address.city+' '+ 
                 students[c].address.state; 
     c = ++c%students.length;  
    } 

    var btn = document.getElementById('button'); 
    btn.addEventListener('click', getStudentData, false); 

})();