javascript - 多个动态创建的输入字段值不能超过指定数量

Question

我有多个放置区(上传元素)，其中为添加的每个文件显示预览元素。每个预览都有一个输入数字字段。

每个 dropzone 都是一个表单，其中有一个隐藏的输入字段，其中包含一个值，该值是 dropzone 元素内所有输入字段的允许总和。

例如:

Dropzone 1 has total sum of: 10
And two previews with inputs, then for example this is possible:
input1: 10
input2: 0
Or 
input1: 5
input2:5
etc

只要总数为10。您不应超过 10，或者当 input1 具有 3 作为值时，第二个输入不应超过 7 > 等等

我尝试了以下方法:

const attributeVal = $input;

attributeVal.on("change paste keyup input", function(e) {
  let newVal = Math.floor($input.val());
  newVal = Math.max(0, newVal);
  newVal = Math.min(10, newVal);
  const maxValue = parseInt(aantal);
  let valueSpent = 0;
  $input.not(this).each(function() {
    valueSpent += +$input.val();
  });
  if (newVal + valueSpent > maxValue) {
    // Invalid, reset these points to the maximum allowable:
    newVal = maxValue - valueSpent;
  }
  // New value has been validated, put it into the DOM:
  $input.val(newVal);
});

attributeVal.on("cut copy paste", function(e) {
  e.preventDefault();
});

其中 $input 是当前预览中的输入字段，aantal 是总和。问题是(在本例中为 aantal = 10)，每个输入字段都可以有 10 (不超过)，因此它看不到其他输入的值。

我尝试将 $input.not(this).each(function() { 更改为 $input.each(function() {) 但当我添加两个图像时所以有两个输入字段，我只能在每个输入字段中转到 5。总共是 10 所以这是正确的，但不可能添加 其中一个包含 9，另一个包含 1，每个最多只能 5。

我怎样才能得到这个结果？

我在这里添加了一个jsfiddle:https://jsfiddle.net/ar2395bw/ (要获得预览，您可以将文件拖到大框中或单击它们并上传一些文件)。

Answer 1

JSFiddle 中的代码存在一些问题(上面发布的代码不足以诊断问题)。

未找到所有$input

let $preview = $(file.previewElement);
let $input = $preview.find('.fileinput');

您的 $preview 已连接到每个文件，因此您只能找到一个 $input，即正在更改的那个。

.each() 的使用不正确

$input.not(this).each(function() {

传递给 .each() 的函数必须接受索引和值作为参数。正如当前设置的那样，$input 在循环的每次迭代中将始终引用相同的值。

尝试使用清理/修改值计算总计

  newVal = Math.max(0, newVal);
  newVal = Math.min(10, newVal);

此处确保 newVal 在 0-10 范围内，然后使用更改值来计算总 newVal + valueSpent > maxValue

解决方案

以下代码修复了所有这些问题。

const attributeVal = $input;

attributeVal.on("change paste keyup input", function (e) {
  const maxValue = parseInt(aantal);
  let valueSpent = 0;
  $preview.closest('.dropzone').find('.fileinput').each(function (index, input) {
    valueSpent += +$(input).val();
  });
  if (valueSpent > maxValue) {
    // Invalid, reset these points to the maximum allowable:
    $input.val($input.val() - (valueSpent - maxValue));
  }
});

attributeVal.on("cut copy paste", function (e) {
  e.preventDefault();
});

这对我在 JSFiddle 上有用。