差异

Question

我在计算两个变量的差时遇到问题，该变量应根据输入值和输入数量而变化。

jQuery可以很好地添加/减少按钮，这是我一直在处理的peoplePaid（）函数。

我试图写出payTotal减去pCheck的每个输入的差（.difference）。

所以，第一个问题是如何获取差异值（paidTotal-pCheck），以便为页面上的每个输入写入.difference。

如果我必须循环播放，可能需要做些什么。

谢谢！

$(document).ready(function () {
    var maxFields = 20;
    var addButton = $('#plusOne');
    var deleteButton = $('#minusOne');
    var wrapper = $('#userNumbers');
    var fieldInput = '<div><input type="text" name="persons" class="persons"/></div>';
    var x = 1;

    $(addButton).click(function () {
        if (x < maxFields) {
            x++;
            $(wrapper).append(fieldInput);
        }

    });

    $(deleteButton).click(function (e) {
        e.preventDefault();
        var myNode = document.getElementById("userNumbers");
        i = myNode.childNodes.length - 1;
        if (i >= 0) {
            myNode.removeChild(myNode.childNodes[i]);
            x--;
        }

    });

});

function peoplePaid() {
  var checkTotal = parseFloat(document.getElementById('check').value);
  var personsCheck = document.getElementsByClassName('persons');
  var paidTotal = document.getElementById('paidTotal');
  var serviceQuality = document.getElementById('serviceQuality').value;
  var difference = document.getElementsByClassName('difference');

  var pCheck = 0;

  for (var i = 0; i < personsCheck.length; i += 1) {
    pCheck += parseFloat(personsCheck[i].value);

  }
  paidTotal.innerHTML = (checkTotal * serviceQuality) - pCheck;

  for (var i = 0; i < personsCheck.length; i += 1) {

    checkDifference = parseFloat(paidTotal - pCheck).value;
  }



}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Check Total</h3>
$ <input type="text" id="check" value="" />

<h3>Tip%</h3>
<select name="tip" id="serviceQuality">
  <option disabled selected value="1">-- Choose an Option --</option>

  <option value="1">0%</option>
  <option value="1.06">6%</option>
  <option value="1.15">15%</option>
  <option value="1.2">20%</option>
  <option value="1.3">30%</option>
</select>

<h3>Number of People: <span id="numberOfPeople"></span></h3>

<button type="button" onclick="plusOne()" id="plusOne">+</button>
<button type="button" onclick="minusOne()" id="minusOne">-</button>


<div>
  <div id="userNumbers">
    <input type="text" class="persons" name="person" />
    <p class="difference">$</p>
  </div>
</div>


<button onclick="peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
  <h3>Paid Amount: <span id="paidTotal"></span></h3>
</div>

Answer 1

差异

应该解决一些差异：

（主要），onclick事件处理程序调用了两个函数：
```
svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll(".tick text")
      .call(wrap, x.rangeBand());
```
首先，快速运行此摘录可记录有关这些功能不存在的错误。其次，在使用jQuery时，永远不要使用事件处理程序，就像在快艇上使用桨（事件处理程序）（使用<button type="button" onclick="plusOne()" id="plusOne">+</button> <button type="button" onclick="minusOne()" id="minusOne">-</button>进行事件委派）。
（较小）如果将jQuery对象存储在变量中，请不要将这些变量包装在.on()中，因为在声明它们时它们已经包装在$(...)中。
```
$(...)
```

普通的JavaScript数组方法

（核心）解决方案是收集所有var addButton = $('#plusOne'); $(addButton).on('click',... // That is like doing this: $($('#plusOne')) addButton.on('click',...... // This is the cleaner way or... var $addButton = $('#plusOne'); $addButton.on('click'...... /* This is a common practice which serves as an obvious reminder that the variable is a jQuery Object */，方法是将input.customer'收集到<input>s的NodeList中，然后将其转换成{{1 }}：
```
.querySelctorAll()
```
接下来，使用Array.from()提取每个var customers = Array.from(document.querySelectorAll('.customer'));值，然后将它们作为数组返回：
```
.map()
```
最后，使用<input>'s将var payments = customers.map(function(customer) { return parseFloat(customer.value); });数组中的所有值加到一个数字中：
```
.reduce()
```

演示

payments

paidTotal = payments.reduce(function(total, number) {
  return total + number;
});

var max = 20;
var count = 1;
var paidTotal = 0;
var customerQty = $('#totalCustomers');
var add = $('#add');
var group = $('.group');
var paid = `
<li>
<input type="number" class="customer" step='0.01'/>
<button type="button" class="remove">-</button>
</li>`;

add.on('click', function(e) {
  if (count < max) {
    count++;
    group.append(paid);
  } else {
    return false;
  }
  customerQty.val(count);
});

group.on('click', '.remove', function() {
  if (count > 0) {
    count--;

    var subtract = parseFloat($(this).prev('.customer').val()).toFixed(2);
    var total = parseFloat($('#paidTotal').val()).toFixed(2);
    var newTotal = parseFloat(total - subtract).toFixed(2);
    $('#paidTotal').val(newTotal);

    var due = parseFloat($('#balanceDue').val());
    $('#balanceDue').val((due + parseFloat(subtract)).toFixed(2));

    $(this).parent().remove();

  } else {
    return false;
  }
  customerQty.val(count);
});

$('#bill').on('input', totalPaid);

function totalPaid(e) {
  var check = $('#check').val();
  var tip = $('#tip').val();
  var total = $('#paidTotal');
  var due = $('#balanceDue');

  var customers = Array.from(document.querySelectorAll('.customer'));

  var payments = customers.map(function(customer) {
    return parseFloat(customer.value);
  });
  //console.log('payments: '+payments);
  paidTotal = payments.reduce(function(total, number) {
    return total + number;
  });

  $('#amountDue').val(parseFloat(check * tip).toFixed(2));

  //console.log('paidTotal: '+paidTotal);
  total.val(parseFloat(paidTotal).toFixed(2));
  due.val(parseFloat((check * tip) - total.val()).toFixed(2));
}

计算多个输入的差并写在页面上

1 个答案:

差异

普通的JavaScript数组方法

演示