如何打印3个项目,与2个输入(价格和量化)

如何打印3个项目,与2个输入(价格和量化),第1张

还有一个问题,请在检查输入的同时帮助打印3个跨度元素。我是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库。

最佳答案:

2 个答案:

答案 0 :(得分:0)

要执行您需要的操作,您可以向DOM附加一个标记,该标记会读取与该复选框相关的price-nameprice-countprice-uname元素,并将其格式化为字符串。试试这个:

 $('.option:checked').each(function () {
     var amount = $(this).val() * $(this).next('.price-count').val();
     sum  = amount;
     $('#checked-elements').html($(this).next('.price-name').innerHTML);
     $('<p />', { 
         text: $(this).siblings('.price-name').text()   ' x '   $(this).siblings('.price-count').val()   ' '   $(this).siblings('.price-uname').text()
     }).appendTo($items);
 });

Example fiddle

答案 1 :(得分:0)

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

 $('.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/

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复