Question

我正在尝试遍历数组，并在单击按钮时将每个项目写入新行。目前，当我点击按钮时没有任何反应。

代码中没有显示错误，哪里出错了？

$(document).ready(function() {

  var vehicle = ["G122 IVL", "H151 KEE", "U109 FIJ"];

  var cameraOne = function() {

    $.each(vehicle, function(index, value) {
      $('#c1').html('<p>' + value + '</p>');
    });
  };

  $('#cameraOne').click(function() {
    cameraOne();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
  <input type="button" id="cameraOne" value="Camera One" />
  <div id="c1"></div>
</div>

Answer 1

当您要追加时，您将使用每个新行覆盖#c1的内容：

$(document).ready(function() {

  var vehicle = ["G122 IVL", "H151 KEE", "U109 FIJ"];

  var cameraOne = function() {
    $('#c1').empty();

    $.each(vehicle, function(index, value) {
      // use .text() instead of just writing the value to the <p> tag, so we're safe
      // if the value contains <, etc.
      $('#c1').append($('<p>').text(value));
    });
  };

  $('#cameraOne').click(function() {
    cameraOne();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
  <input type="button" id="cameraOne" value="Camera One" />
  <div id="c1"></div>
</div>

Answer 2

试试这个：

$(document).ready(function() {

var vehicle = ["G122 IVL", "H151 KEE", "U109 FIJ"];

var cameraOne = function() {

    $.each(vehicle, function(index, value) {
        $('#c1').append('<p>' + value + '</p>');
    });
};

$('#cameraOne').click(function() {
        cameraOne();
    });
});

html会覆盖内容，因此您只获得最后一个值。请改用append。

Answer 3

每次找到值时，不应使用导致行覆盖的'html'$('#c1').html('' + value + '');，而应使用'append'$('#c1').append('' + value + '');为每个值创建一个新行。

循环遍历数组，将每个项输出到新行

3 个答案: