Question

我是JQuery的新手，我正尝试通过减去具有相同div类的不同列来自动填充表单。

这是我的代码：

$(document).on("change", ".limiter", function() {
  var sum = 0;
  $(".limiter").each(function() {
    sum += +$(this).val();
  });
  $(".totallimiter").val(sum);
});

$(document).on("change", ".used", function() {
    var sum = 0;
    $(".used").each(function(){
        sum += +$(this).val();
    });
    $(".totalused").val(sum);
});


$(document).on("change", ".remaining", function() {
    var sum = 0;
    $(".remaining").each(function(){
        sum += +$(this).val();
    });
    $(".totalrem").val(sum);
});

$(document).ready(function() {
    //this calculates values automatically 
    diff();
    $("#limiter, #used").on("keydown keyup", function() {
        diff();
    });
});

function diff() {
           // var limiter = document.getElementById('limiter').value;
         //   var used = document.getElementById('used').value;			
         	var limiter = $("#limiter").val();
         	var used = $("#used").val();
			var result = limiter - used;
            if (!isNaN(result)) {
				document.getElementById('remaining').value = result;
            }
        }

.TableBox {
  display: table;
  border-spacing: 6px;
}

.TableBox>div {
  display: table-row;
  border-spacing: 5px
}

.TableBox>div>div {
  display: table-cell;
  margin: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="TableBox" style="width: 100%;">
  <div>
    <div></div>
    <div>Limiter</div>
    <div>Used</div>
    <div>Remaining</div>
  </div>
  <div>
    <div></div>
    <div class="limiter"><input size="5" type="text" class="limiter" id="limiter" value=""></div>
    <div class="used"><input size="5" type="text" class="used" id="used" value=""></div>
    <div class="remaining"><input size="5" type="text" class="remaining" id="remaining" value=""></div>
  </div>

  <div>
    <div></div>
    <div class="limiter"><input size="5" type="text" class="limiter" value=""></div>
    <div class="used"><input size="5" type="text" class="used" value=""></div>
    <div class="remaining"><input size="5" type="text" class="remaining" value=""></div>
  </div>

  <div>
    <div></div>
    <div class="limiter"><input size="5" type="text" class="limiter" value=""></div>
    <div class="used"><input size="5" type="text" class="used" value=""></div>
    <div class="remaining"><input size="5" type="text" class="remaining" value=""></div>
  </div>

  <div>
    <div></div>
    <div class="limiter"><input size="5" type="text" class="limiter" value=""></div>
    <div class="used"><input size="5" type="text" class="used" value=""></div>
    <div class="remaining"><input size="5" type="text" class="remaining" value=""></div>
  </div>

  <br>

  <div>
    <div align="left">Total Cycles: </div>
    <div><input size="5" type="text" class="totallimiter" value=""></div>
    <div><input size="5" type="text" class="totalused" value=""></div>
    <div><input size="5" type="text" class="totalrem" value=""></div>
  </div>


</div>

问题在于，它仅返回前两列之间的差，但是在其余页面中则不这样做。我对所有社区使用相同的类名，即“ limiter”和“ used”。任何帮助表示赞赏。谢谢。

Answer 1

const sum = $inputs => $inputs.get().reduce((a, el) => a + (parseInt(el.value, 10) || 0), 0);

function calcTableBox() {
  const $table = $('#TableBox');
  const $row = $table.find('> div');

  $row.each(function() {
    const $this = $(this);
    const limiter = parseInt($this.find('.limiter').val(), 10); // parseInt at radix decimal
    const used    = parseInt($this.find('.used').val(), 10);
    const remaining = limiter - used;
    if (!isNaN(remaining)) $this.find('.remaining').val( remaining );
  });

  $table.find('.totallimiter').val(sum($table.find('.limiter')));
  $table.find('.totalused').val(sum($table.find('.used')));
  $table.find('.totalrem').val(sum($table.find('.remaining')));
}

jQuery($ => { // DOM ready

  $(".limiter, .used").on("input", calcTableBox);
  calcTableBox(); // Init

});

.TableBox {
  display: table;
  border-spacing: 6px;
}

.TableBox input[type=text] {
  max-width: 80px;
}

.TableBox>div {
  display: table-row;
  border-spacing: 5px
}

.TableBox>div>div {
  display: table-cell;
  margin: 4px;
}

[readonly] {
  color: #aaa;
}

<div id="TableBox" class="TableBox" style="width: 100%;">
  <div>
    <div></div>
    <div>Limiter</div>
    <div>Used</div>
    <div>Remaining</div>
  </div>
  <div>
    <div></div>
    <div><input type="text" class="limiter" value="32"></div>
    <div><input type="text" class="used" value="23"></div>
    <div><input type="text" class="remaining" readonly></div>
  </div>
  <div>
    <div></div>
    <div><input type="text" class="limiter" value=""></div>
    <div><input type="text" class="used" value=""></div>
    <div><input type="text" class="remaining" readonly></div>
  </div>
  <div>
    <div></div>
    <div><input type="text" class="limiter" value="5"></div>
    <div><input type="text" class="used" value="3"></div>
    <div><input type="text" class="remaining" readonly></div>
  </div>
  <div>
    <div></div>
    <div><input type="text" class="limiter" value=""></div>
    <div><input type="text" class="used" value=""></div>
    <div><input type="text" class="remaining" readonly></div>
  </div>
  <div>
    <div>Total Cycles: </div>
    <div><input type="text" class="totallimiter" readonly></div>
    <div><input type="text" class="totalused" readonly></div>
    <div><input type="text" class="totalrem" readonly></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

减去具有相同类名的输入字段

1 个答案: