javascript - onchange 必须从它存储值的计数器中删除值

标签 javascript jquery mysql

我正在为管理程序创建凭证,我有一个输入字段,用于计算值并添加到最后一列,作为所有行中借方和贷方的总和,我正在使用计数器来跟踪总和,我是使用 onchange 或 onblur click 事件,它运行良好,它计算行的增加,但是当我尝试从输入中删除值时,它仍然计算我的计数器

这是代码

var credit_counter = 0;
$(document).on('blur', 'input[name="credit[]"]', function () {
  idName = $(this).attr('id');
  id = idName.substring(6, idName.length);
  var value = $(this).val();
  credit_counter = credit_counter + Number(value);
  var credit_balance = $("#get_credit").val(credit_counter)
});

var debit_counter = 0;
var total_balance = 0;

$(document).on('blur', 'input[name="debit[]"]', function () {
  idName = $(this).attr('id');
  id = idName.substring(6, idName.length);
  var value = $(this).val();
  $("#credit" + id).val(value)
  debit_counter = debit_counter + Number(value);
  var debit_balance = $("#get_debit").val(debit_counter);
});

我想删除该值,以防我从输入字段中删除值,谢谢

最佳答案

这是一个完整的例子,它实现了你想要做的事情(警告:没有添加任何样式,所以它很难看)。您可以将其复制并粘贴到 .html 文件中,然后使用您选择的网络浏览器打开它以查看它的运行情况:

<!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>

<input placeholder="credit field 1" type="text" name="credit" /><br/>
<input placeholder="credit field 2" type="text" name="credit" /><br/>
<input placeholder="credit field 3" type="text" name="credit" /><br/>
<input placeholder="credit field 4" type="text" name="credit" /><br/>
<input placeholder="debit field 1" type="text" name="debit" /><br/>
<input placeholder="debit field 2" type="text" name="debit" /><br/>
<input placeholder="debit field 3" type="text" name="debit" /><br/>
<input placeholder="debit field 4"type="text" name="debit" /><br/>
<input placeholder="credit total" id="get_credit" type="text" /><br/>
<input placeholder="debit total" id="get_debit" type="text" /><br/>


<script>
$(document).on('blur', 'input[name="credit"]', function () {
  var total = 0;
  $('input[name="credit"]').each(function( index, element ) {
      if(!isNaN($(this).val())){
        total += Number($(this).val());
      }
      $('#get_credit').val(total);
  });
});

$(document).on('blur', 'input[name="debit"]', function () {
  var total = 0;
  $('input[name="debit"]').each(function( index, element ) {
      if(!isNaN($(this).val())){
        total += Number($(this).val());
      }
      $('#get_debit').val(total);
  });
});
</script>

</body>
</html> 

您的问题是,您跟踪总借方和总贷方的方式不允许您单独了解每个输入中存储的值。产生的问题是,当一个值被删除时,您无法知道要从总数中减去什么。 (同样,如果有人将值从 3 更改为 30,那么您的总数将增加 30 而不是 27)。

肯定有不止一种方法可以解决这个问题,但是我发布的答案是我认为最简单的:在输入模糊时,遍历适当的输入并将它们加在一起,然后将总数分配给适当的输入.

请注意,我已经排除了您对输入的 id 采取行动的逻辑,因为在没有进一步解释或查看您的 View 标记的情况下,您不清楚您对它们做了什么。它似乎也与您发布的问题无关。

关于javascript - onchange 必须从它存储值的计数器中删除值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53932766/

相关文章:

javascript - 在使用 D3.js fork 3D Force-Directed Graph 创建的 2D 图形上的鼠标左键上添加鼠标平移

javascript - MVC5 Controller 未接收ajax发布的html内容

jquery - 强制 ionic 侧菜单滚动到顶部

php - 移动保留原始 ID 但允许在目标表中自动递增的行

javascript - 从 PHP 页面动态值解析到弹出模态框

javascript - 带有固定标题的 HTML 表格?

javascript - 如何使用 Javascript 禁用样式为 jquery-ui 按钮的 <a>

javascript - 拆分最后两个词并在 javascript 中过滤

javascript - 如何在 Chrome 开发人员工具中实时查看数据属性值?

php - mysql php查询死了