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

我可能只是没有看到某些东西（可能在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);
}

你会看到这两个名字都进入控制台（正如你设计的循环一样）。

您需要一个函数作为“show next”选项的点击处理程序。您可以在跟踪当前索引的链接上保留一个属性，然后在每次单击链接时只增加该值。

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

Answer 2

使用的不是单个对象，而是使用所有对象。来自每个对象的数据将放在元素中，并且每个对象都会覆盖前一个对象的数据。

不要遍历所有对象，而是跟踪要使用的对象。最初显示第一个，并在单击按钮时更改为下一个。

(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 3

<强> 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);

})();

Answer 4

我认为它选择了两者，但第二个在第一个放置其内容之后立即覆盖了第一个。仅显示第一个而不是for put

如果你想显示第一个，你可以删除for并只插入学生的值[0]

循环遍历一个对象数组

4 个答案: