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

我有多个DropZone（upload元素），其中为添加的每个文件显示预览元素。每个预览都有一个输入编号字段

每个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

我怎样才能得到那个结果

---

我在这里添加了一个JSFIDLE：（要获得预览，您可以将文件拖到大框中，或者单击它们并上载一些文件）。

JSFIDLE中的代码存在一些问题（上面发布的代码不足以诊断问题）

未找到所有

$input

您的

$preview

连接到每个文件，因此您只能找到一个

$input

，即正在更改的文件

不正确使用

.each（）

传递给

。each（）

的函数必须接受索引和值作为参数。由于当前已设置，

$input

在循环的每次迭代中将始终引用相同的值

尝试使用已清理/修改的值计算总计 此处确保

newVal

在0-10范围内，但随后使用changed值计算总

newVal+valuespended>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();
});

---

这在JSFIDLE上对我很有效。

存在多个问题：

并非每个投放区都有

aantalinput

aantalinput

必须是类而不是id

让aantal=$el.find（'.aantalinput'）.val（）；

$input

当前放置区域中的所有时间都应该类似于

让$input=$（'table'）。查找（'fileinput'）；

let$input=$（'table'）.find（'.fileinput'）；

必须位于

attributeVal.on（“更改粘贴键控输入”，函数（e）{

和

const attributeVal=$preview.find（'.fileinput'）；

let计数器=0；
$（'.dropzone'）。每个（函数（索引，元素）{
设$el=$（元素）；
设$maxfiles=$el.attr（'maxfiles'）；
让$inputquantity=$el.find（'input'）.val（）；
让上传的_preview=$（'.hiddendiv'）.html（）；
设aantal=$el.find（'.aantalinput'）.val（）；
让$thisdropzone=$el；
让total_container=$el.parent（）.find（'.row total'）；
$el.dropzone({
paramName:“postedFile”，
addRemoveLinks：是的，
dictDefaultMessage:“上载和（en）”，
dictRemoveFile:'Verwijder'，
dictCancelUpload:'环形人'，
DictionValidFileType:“Dit类型bestand是niet TOEGSTAN”，
dictCancelUploadConfirmation:“您是否已上传枯萎病？”，
格言：“Maximale aantal bestanden overschreden”，
maxFiles:$maxFiles，
接受的文件：'.jpg、.jpeg、.png、.pdf、.tif、.tiff'，
指钉宽度：“205”，
指钉高度：“140”，
thumbnailMethod:“裁剪”，
previewTemplate:已上载\u预览，
处理：函数（文件）{
},
//文件包含dropzone文件对象，响应包含来自php文件的ajax响应
错误：函数（文件、响应）{
计数器++；
console.log（'选项'+计数器）；
响应=“[{”状态“：”错误“，”文件名“：”instablok“+计数器+”.jpg“，”文件大小“：22822，“tmp_名称“\/tmp\/phpI6ov6y”，“高度“：172，“宽度“：565，”高度“：”6'+计数器+”，07“，”宽度“：”19'+计数器+”，93“，”宽度“：null，“dpi:“72”]；
让文件_meta=JSON.parse（响应）；
让$preview=$（file.previewElement）；
让$plusbtn=$preview.find（“#plusupload”）；
让$minbtn=$preview.find（'minupload'）；
常量attributeVal=$preview.find（'.fileinput'）；
属性值开启（“更改粘贴键控输入”，功能（e）{
让$input=$（'table'）.find（'fileinput'）；
设newVal=Math.floor（this.value）；
newVal=Math.max（0，newVal）；
newVal=Math.min（10，newVal）；
const maxValue=parseInt（aantal）；
设valuespend=0；
$input.not（this）.each（function（）{
valuespend+=parseInt（this.value）；
});
如果（newVal+valuespend>maxValue）{
//无效，请将这些点重置为允许的最大值：
newVal=maxValue-valuespend；
}
//新值已验证，请将其放入DOM：
this.value=newVal；
});
属性值on（“剪切复制粘贴”，函数（e）{
e、 预防默认值（）；
});
如果（文件[0]。状态==“成功”）{
}else if（文件[0]。状态='error'）{
$preview.find（'.vrijgevenbtn'）.show（）；
$preview.find（'.foutformat'）.show（）；
}
$preview.find（'.bestandnaam'）.text（'Bestandsnaam:'+文件\元[0]。文件名）；
$preview.find（'.resolutie'）.text（'resolutie:'+file_meta[0].dpi+'dpi'）；
$preview.find（'.format'）.text（'format:'+file\m
$input.not(this).each(function() {

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

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();
});