Question

我有以下代码不能按照我想要的方式工作，显然，我试图将选项数据属性与输入文本区域值相乘，而是选择使用选项值。我需要找出原因。

这是我的代码;

     <input id="count" min="1" value="1" class ="txtMult form-control" type="number" name="txtEmmail" />
      <input type="text" value=""  class ="txtMult" name="txtEmmail"/>
      <span class="multTotal"></span>

    <select class="selectpicker">
    <option value="1" data-cubics='1'>multiply with 1</option>
    <option value="5" data-cubics='5'>multiply with 5</option>
    </select>

    <span id="grandTotal">250</span>

$(function(){
                $('.txtMult').change(function(){
                    var p=$(this).parent().parent()
                    var m=p.find('input.txtMult')
                    var mul=parseInt($(m[0]).val()*$(m[1]).val()).toFixed(2)
                    var res=p.find('.multTotal')
                    res.html(mul);
                    var total=0;
                    $('.multTotal').each(function(){
                        total+=parseInt($(this).html());
                    })
                    parseInt(total).toFixed(2);
                    $('#grandTotal').html(parseInt(total).toFixed(2));
                });
            })



$('.selectpicker').change(function() {
    calcVal();
});

function calcVal(){
    $(this).data('cubics')*$('.multTotal').html();
   $("#grandTotal").html($(this).data('cubics')*$('.multTotal').html())
}

// call on document load
calcVal();

Answer 1

请勿使用.html()获取值，而是使用.text()。
您需要使用以下选项获取所选选项：

$("#grandTotal").html($(this).children(':checked')

$(function() {
  $('.txtMult').change(function() {
    var p = $(this).parent().parent()
    var m = p.find('input.txtMult')
    var mul = parseInt($(m[0]).val() * $(m[1]).val()).toFixed(2)
    var res = p.find('.multTotal')
    res.html(mul);
    var total = 0;
    $('.multTotal').each(function() {
      total += parseInt($(this).text());
    })
    parseInt(total).toFixed(2);
    $('#grandTotal').html(parseInt(total).toFixed(2));
  });
})



$('.selectpicker').change(calcVal);

function calcVal() {
  $("#grandTotal").html($(this).children(':checked').data('cubics') * $('.multTotal').text().trim())
}

// call on document load
calcVal();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div>
    <input id="count" min="1" value="1" class="txtMult form-control" type="number" name="txtEmmail" />
    <input type="text" value="" class="txtMult" name="txtEmmail" />
    <span class="multTotal"></span>

    <select class="selectpicker">
    <option value="1" data-cubics='1'>multiply with 1</option>
    <option value="5" data-cubics='5'>multiply with 5</option>
</select>

    <span id="grandTotal">250</span>
  </div>
</div>

将输入值与选择选项数据属性相乘

1 个答案: