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

Looping through array values using JQuery and show them on separate lines

本文关键字：显示 单独 遍历 循环 JQuery 数组 使用      更新时间：2023-09-26

我正在构建一个简单的购物车，访问者可以在其中选择一些他们想要的商品，点击"下一步"按钮，然后看到他们刚刚选择的商品的确认列表。我希望每一项所选商品的确认单都能在每行上显示出来。

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>

JS 

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

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

Try

$(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()
    });
});

演示:小提琴

试试这个

<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();
    });
});

小提琴

相关文章：