使用 JQuery 循环遍历数组值并将它们显示在单独的行上答案

【问题标题】：Looping through array values using JQuery and show them on separate lines使用 JQuery 循环遍历数组值并将它们显示在单独的行上
【发布时间】：2014-07-17 02:57:42
【问题描述】：

我正在构建一个简单的购物车，访问者可以在其中选择他们想要的一些商品，点击“下一步”按钮，然后查看他们刚刚选择的商品的确认列表。我想在每行显示每个选定项目的确认列表。

HTML 选择

<div id="c_b">
  <input type="checkbox" value="razor brand new razor that everyone loves, price at $.99" checked> 
  <input type="checkbox" value="soap used soap for a nice public shower, good for your homies, price at $.99" checked>
  <input type="checkbox" value="manpacks ultimate choice, all in 1, price at $99">
</div>  

<button type='button' id='confirm'>Next</button>

HTML 确认列表

<div id='confirmation_list' style='display:none;'>
<h2>You have selected item 1</h2>
<h2>Your have selected item 2 </h2>
</div>

$(function(){
   $('#confirm').click(function(){
    var val = [];
    $(':checkbox:checked').each(function(i){
      val[i] = $(this).val();
    });
  });
});

我最终想用从每个复选框中选择的值替换 h2s 中的“您已选择项目 2”。使用上面的代码，我可以将每个复选框的值收集到一个数组 val 中，但是很难循环显示它们。

任何建议将不胜感激。

【问题讨论】：

标签： javascript jquery html arrays

【解决方案1】：

试试

$(function () {
    $('#confirm').click(function () {
        var val = [];
        var els = $('input:checkbox:checked').map(function (i) {
            return $('<h2 />', {
                text: 'You have selected item \'' + this.value + '\''
            })
        }).get();

        $('#confirmation_list').empty().append(els).show()
    });
});

演示：Fiddle

【讨论】：

非常感谢。 'You have selected item' 后面的 '\' 是什么意思？
@user3192948 只是用一对''添加选定的项目值

【解决方案2】：

试试这个

<div id="c_b">
    <input type="checkbox" value="razor brand new razor that everyone loves, price at $.99" checked>
    <input type="checkbox" value="soap used soap for a nice public shower, good for your homies, price at $.99" checked>
    <input type="checkbox" value="manpacks ultimate choice, all in 1, price at $99">
</div>
<button type='button' id='confirm'>Next</button>
<div id='confirmation_list' style='display:none;'>
</div>

你的JS代码应该是

$(function () {
    $('#confirm').click(function () {
        $("#confirmation_list").empty();
        $('input:checkbox:checked').each(function (i) {
            $("#confirmation_list").append("<h2>You have selected item '" + $(this).val() + "'</h2>");

        });
        $("#confirmation_list").show();
    });
});

Fiddle

【讨论】：

非常感谢。像魅力一样工作。