javascript - 如何打印3个项目，与2个输入(价格和数量)相关

Question

还有一个问题，请帮忙在检查输入的同时打印出 3 个 span 元素。我是 JQuery 的初学者。 一般来说，我有价格计算器，它获取选中元素的价格(第一个输入中的值)，将其乘以数量(第二个输入中的值)并给出总金额。

HTML

<li class="price">
  <input type="checkbox" class="option" value="5000"  />
  <input class="price-count" type="number" min="1"  value="1" />
  <span class="price-name">Shirt</span>
  <span class="price-price">5000</span>
  <span class="price-uname">pieces</span>
</li>
<li class="price">
  <input type="checkbox" class="option" value="9000"  />
  <input class="price-count" type="number" min="1"  value="1" />
  <span class="price-name">Trousers</span>
  <span class="price-price">9000</span>
  <span class="price-uname">square meter</span>
</li>

...有 30 个 LI 元素

JavaScript

    $('.option, .price-count').change(function() {
        var sum = 0;  

        $('.option:checked').each(function() {
            sum += $(this).val() * $(this).next('.price-count').val();
            $('#checked-elements').html($(this).next('.price-name').innerHTML);
        });

        $('#total').html(sum);
    });

请帮助打印出每个检查的元素，包括名称、数量和计量单位，以逗号分隔并使用 JQuery 库。

Answer 1

我添加了代码来解析已检查项目的值并将其打印为总数下方的逗号分隔列表:

 $('.option, .price-count').change(function() {
        var sum = 0;
        var selected = $('<ul></ul>');

        $('.option:checked').each(function() {
            var amount = $(this).val() * $(this).next('.price-count').val();
            sum += amount;
            var li = $(this).closest('li');
            var name = li.find('.price-name').html();
            var qty = li.find('.price-count').val();
            var unit = li.find('.price-uname').html();
            selected.append($('<li>'+ name + ', ' + qty + ', ' + unit + '</li>'));
        });

        $('#total').html(sum);
        $('#selected-items').html(selected);
    });

看看这个jsfiddle:http://jsfiddle.net/voveson/7vtvfofj/2/