时间戳

首页 > 解决方案 > 多个动态创建的输入字段值不能超过指定数量

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

问题描述

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

每个 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/ （要获得预览，您可以将文件拖到大框中或单击它们并上传一些文件）。

标签： javascriptjquerymathdropzone.js

解决方案

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 上对我有用。

推荐阅读