我有多个dropzone元素,其中显示了上载图像的预览。在这些预览中,通过单击可以添加或减去该输入字段的值,在输入字段旁边添加了+
和-
按钮。效果很好,但是现在我需要获取所有输入字段的总和(仅在该dropzone中,因此仅在each
函数的该迭代中。
在SO上,我找到了一个经过微调以获取以下代码的函数:
$plusbtn.click(function(e) {
e.preventDefault();
let currentValue = parseInt($input.val());
$input.val(currentValue + 1);
$preview.each(function(){
currentValue += +$input.val();
});
console.log(currentValue);
});
currentValue
显示每当我单击2
按钮而不是总和时,控制台中的数字增加了+
。例如1-3-5-7-9-11
。
这是每个函数中的全部代码。
$('.dropzone').each(function(index, element){
let $el = $(element);
let $maxfiles = $el.attr('maxfiles');
let $inputquantity = $el.find('input').val();
let uploaded_preview = $('.hiddendiv').html();
let $thisdropzone = $el;
$el.dropzone({
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: uploaded_preview,
processing: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
success: function (file, response) {
// alert('test');
let file_meta = JSON.parse(response);
let $preview = $(file.previewElement);
let $plusbtn = $preview.find('#plusupload');
let $minbtn = $preview.find('#minupload');
let $input = $preview.find('.fileinput');
// Input plus min
$plusbtn.click(function(e) {
e.preventDefault();
let currentValue = parseInt($input.val());
$input.val(currentValue + 1);
$preview.each(function(){
currentValue += +$input.val();
});
console.log(currentValue);
});
$minbtn.click(function(e) {
e.preventDefault();
let currentValue = parseInt($input.val());
$input.val(currentValue - 1);
$input.each(function(){
currentValue += -$(this).val();
});
});
if(file_meta[0].status == 'success'){
}else if(file_meta[0].status == 'error'){
$preview.find('.vrijgevenbtn').show();
$preview.find('.foutformaat').show();
}
$preview.find('.bestandnaam').text('Bestandsnaam: ' + file_meta[0].filename);
$preview.find('.resolutie').text('Resolutie: ' + file_meta[0].dpi + ' DPI');
$preview.find('.formaat').text('Formaat: ' + file_meta[0].heightcm + ' x ' + file_meta[0].widthcm + 'cm');
},
})
});
如何获得each
迭代中所有输入字段的总和?
这是一个代码段:
let counter = 0;
$('.dropzone').each(function(index, element){
let $el = $(element);
let $maxfiles = $el.attr('maxfiles');
let $inputquantity = $el.find('input').val();
let uploaded_preview = $('.hiddendiv').html();
let $thisdropzone = $el;
$el.dropzone({
paramName: 'postedFile',
addRemoveLinks: true,
dictDefaultMessage: '<i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span>',
dictRemoveFile: 'Verwijder',
dictCancelUpload: 'Annuleren',
dictInvalidFileType: 'Dit type bestand is niet toegestaan',
dictCancelUploadConfirmation: 'Weet je zeker dat je het uploaden wilt annuleren?',
dictMaxFilesExceeded: 'Maximale aantal bestanden overschreden',
maxFiles: $maxfiles,
acceptedFiles: '.jpg, .jpeg, .png, .pdf, .tif, .tiff',
thumbnailWidth: '205',
thumbnailHeight: '140',
thumbnailMethod: 'crop',
previewTemplate: uploaded_preview,
processing: function (file) {
},
// File contains dropzone file object, response contains ajax response from php file
error: function (file, response) {
counter++;
console.log('Option ' + counter);
response = '[{"status":"error","filename":"instablok'+counter+'.jpg","filesize":22822,"tmp_name":"\/tmp\/phpI6ov6y","height":172,"width":565,"heightcm":"6'+counter+',07","widthcm":"19'+counter+',93","tifwidth":null,"dpi":"72"}]';
let file_meta = JSON.parse(response);
let $preview = $(file.previewElement);
let $plusbtn = $preview.find('#plusupload');
let $minbtn = $preview.find('#minupload');
let $input = $preview.find('.fileinput');
// Input plus min
$plusbtn.click(function(e) {
e.preventDefault();
let currentValue = parseInt($input.val());
let sum = 0;
$input.val(currentValue + 1);
$preview.each(function(){
currentValue += +parseInt($input.val());
});
console.log(currentValue);
});
$minbtn.click(function(e) {
e.preventDefault();
let currentValue = parseInt($input.val());
$input.val(currentValue - 1);
$input.each(function(){
currentValue += +$(this).val();
});
});
if(file_meta[0].status == 'success'){
}else if(file_meta[0].status == 'error'){
$preview.find('.vrijgevenbtn').show();
$preview.find('.foutformaat').show();
}
$preview.find('.bestandnaam').text('Bestandsnaam: ' + file_meta[0].filename);
$preview.find('.resolutie').text('Resolutie: ' + file_meta[0].dpi + ' DPI');
$preview.find('.formaat').text('Formaat: ' + file_meta[0].heightcm + ' x ' + file_meta[0].widthcm + 'cm');
},
})
});
.hiddendiv {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<script type="text/javascript">
// Disable auto discover for all elements:
Dropzone.autoDiscover = false;
</script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<table class="table upload-table">
<tbody>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 20cm
<br>
Breedte : 20cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">20 x 20cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">10</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 10</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="10" id="dropzone1">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="20" name="hoogte">
<input type="hidden" value="20" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
<tr>
<td class="plantmore-product-thumbnail uploadimg" width="100">
<a href=""><img src="assets/images/noimg.jpg" alt=""></a>
</td>
<td class="plantmore-product-name" width="200">
<div class="prodinfocheckout">
<a class="prodname" href="">
Monomeer
</a>
<span id="togglespecscheckout" class="prodspecscheckout noselect">
<i class="fas fa-chevron-down"></i> Specificaties
</span>
<div class="togglespecscheckout">
Hoogte : 90cm
<br>
Breedte : 90cm
<br>
uploaden : 1
<br>
Lijmlaag : Wit
<br>
Laminaat : Anti-slip laminaat
<br>
Afwerking : Contoursnijden
<br>
</div>
</div>
</td>
<td class="plantmore-product-quantity" width="190">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">
Benodigd formaat:<br>
<span class="benodigd">90 x 90cm</span>
</span>
</span>
</td>
<td class="plantmore-product-quantity" width="185">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Benodigde aantal<br> bestanden: <span class="benodigd">1</span></span>
</span>
</td>
<td class="plantmore-product-quantity">
<span class="centervertical">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
<span class="amount">Bestanden <br>toegewezen: <span class="benodigd">0 / 1</span></span>
</span>
</td>
<td class="plantmore-product-quantity" valign="top">
<button class="uploadbutton btn yellowbtn dz-clickable">Bestand(en) uploaden</button>
</td>
</tr>
<tr class="newrow">
<td colspan="6">
<form action="upload/uploaden.php" class="dropzone dropzoneform dz-clickable" maxfiles="1" id="dropzone4">
<input type="hidden" value="Monomeer" name="productnaam">
<input type="hidden" value="Twan" name="klantnaam">
<input type="hidden" value="90" name="hoogte">
<input type="hidden" value="90" name="breedte">
<div class="dz-default dz-message"><span><i class="fas fa-file-upload uploadicon"></i> <span class="uploadtxt">Upload je bestand(en)</span></span></div>
</form>
</td>
</tr>
</tbody>
</table>
<div class="hiddendiv">
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<span class="infoline">
<span class="infospan bestandnaam">Bestandnaam:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan resolutie">Resolutie:</span>
<!-- <i class="fas fa-check-circle goedgekeurd"></i> -->
</span>
<span class="infoline">
<span class="infospan formaat">Formaat:</span>
<!-- <i class="fas fa-times-circle afgekeurd"></i> -->
</span>
<div class="foutformaat">
<span>Bestand heeft niet het benodigde formaat.</span>
<span class="uploadinfobox">
<button class="infotooltip tooltipupload" data-tooltip="Lorem ipsum">
<i class="fas fa-info-circle"></i>
</button>
</span>
</div>
<button class="yellowbtn btn vrijgevenbtn" type="button">Bestand vrijgeven</button>
<hr class="uploadline">
<span class="toewijzen">Aantal</span>
<div class="uploadcontent">
<input type="number" value="0" min="0" class="fileinput">
<button class="plusminupload" id="minupload">−</button>
<button class="plusminupload" id="plusupload">+</button>
</div>
</div>
</div>
答案 0 :(得分:1)
请看看这个小提琴https://jsfiddle.net/k5ut29os/
我在dropzone的foreach中添加了一个变量来保存总数,并使用一个函数来对其进行更新。
arr1 = np.array(array) # convert your list to numpy array
arr2 = np.sum(arr1,axis=2) # get the sum of the two elements in each array
ind1 = np.unravel_index(arr2.argmin(), arr2.shape) # the indices of the minimum sum
min1 = arr1[ind1] # the value of the minimum array
print(ind1)
(3, 1)
print(min1)
array([1, 2])
然后我在两个按钮(加/减)中调用了该函数
let this_dropzone_sum = 0;
function updateTotal(){
this_dropzone_sum = 0;
$el.find('.uploadcontent input').each( function(){
this_dropzone_sum += parseInt($(this).val());
});
}
希望它能回答您的问题。
答案 1 :(得分:-1)
我想我不明白您的意思,您想知道页面中有很多输入字段吗?
如果可以的话,可以通过document.querySelectorAll('input')。length