遍历数组并打印 html foreach key/value Javascript / jQuery

Question

好的，所以这个函数正在做我期望的一切，直到我点击打印到 html 部分。无论出于何种原因，它一次只会打印出一个索引，而不是打印数组中的每个索引。

此代码的违规部分位于包含的代码段中的第 19-23 行。

$.each(_services, function(index,value)
{
    $('#test').html('<p>' +index+ ":" +value+ '</p>');
});

// services object -- initially EMPTY
var _services = {};

$('#serviceList input[type=checkbox]').change( function serviceList()
{
 // For each checkbox inside the #serviceList container, do the following
 $(this).each( function()
 {
  // Set "_key" to id of checkbox
  var _key = (this).id;

  // If checkbox is checked -- ADD -- its key/value pair to the "services" object
  // else checkbox is unchecked -- DELETE -- key/value pair from "services" object
  (this.checked) ? _services[ _key ] = (this).value : delete _services[ _key ];

  // console.log(_services);
 }); // END foreach()

 // foreach services print paragraph to display key/value
 $.each(_services, function(index,value)
 {
  $('#test').html('<p>' +index+ ":" +value+ '</p>');
    }); // END services foreach
  
}); // END serviceList()

<!DOCTYPE html>
<html>
<head>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  
</head
  
<body>

<ul id="serviceList"> <!-- changed to list in the tutorial -->
  <li><input id="id_a" type="checkbox" value="40"> Test A</li>
  <li><input id="id_b" type="checkbox" value="50"> Test B</li>
  <li><input id="id_c" type="checkbox" value="60"> Test C</li>
  <li><input id="id_d" type="checkbox" value="70"> Test D</li>
</ul>

<div id="test" style="height: 500px; width: 700px; background-color: pink;"></div>

    
</body>

Answer 1

如果你的问题理解正确，那是因为你每次都覆盖了#test元素的内容。如何附加：

   $('#test').append('<p>' +index+ ":" +value+ '</p>');

Answer 2

您每次写新行时都在清除容器的 innerHTML。相反，您应该在 each 循环之前 append 内容和清除容器：

$('#test').empty(); 
$.each(_services, function(index,value) {
    $('#test').append('<p>' +index+ ":" +value+ '</p>');
});

查看下面的演示：

var _services = {};

$('#serviceList input[type=checkbox]').change(function serviceList() {
    // For each checkbox inside the #serviceList container, do the following
    $(this).each(function () {
        // If checkbox is checked -- ADD -- its key/value pair to the "services" object
        // else checkbox is unchecked -- DELETE -- key/value pair from "services" object
        this.checked ? _services[this.id] = this.value : delete _services[this.id];

        // console.log(_services);
    }); // END foreach()

    // foreach services print paragraph to display key/value
    $('#test').empty();
    $.each(_services, function (index, value) {
        $('#test').append('<p>' + index + ":" + value + '</p>');
    });

}); // END serviceList()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="serviceList"> <!-- changed to list in the tutorial -->
  <li><input id="id_a" type="checkbox" value="40"> Test A</li>
  <li><input id="id_b" type="checkbox" value="50"> Test B</li>
  <li><input id="id_c" type="checkbox" value="60"> Test C</li>
  <li><input id="id_d" type="checkbox" value="70"> Test D</li>
</ul>

<div id="test" style="height: 150px; background-color: pink;"></div>

遍历数组并打印 html foreach key/value Javascript / jQuery

iterate through array and print html foreach key/value Javascript / jQuery

javascript

iteration

jquery