[英]Only enable element once all input fields are filled. Reusable function
I am trying to write a reusable function which loops through all input fields, if any are empty I want another element (a href or button) to be toggle a class name (disabled).我正在尝试编写一个可重用的 function 循环遍历所有输入字段,如果有任何为空我想要另一个元素(href 或按钮)来切换 class 名称(禁用)。
Currently it works on the first input but not the second, I think this relates to the jquery selector.目前它适用于第一个输入但不适用于第二个输入,我认为这与 jquery 选择器有关。
JS: JS:
const toggleElem = () => {
const parent = $('.fileUploader--videos');
const $input = parent.find('[type="text"]'); // I think this is the issue
const $wrapper = parent.find('.fileUploader-wrapper');
const visibleClass = 'visible';
$input.on('change input', () => {
toggleElemValidInput($input, $wrapper, visibleClass);
});
};
toggleElem();
const toggleElemValidInput = (input, elem, className) => {
input.each(function() {
if ($(this).val() !== '') {
// also would prefer if ($(this).val().length !== 0)
elem.addClass(className);
} else {
elem.removeClass(className);
}
});
};
HTML: HTML:
<div class="fileUploader col fileUploader--videos hasAdvancedUpload" data-action="/api/v1/ProductMediaVideoUploadApi" data-method="post">
<label for="videoTitle" class="mb-3">
<input type="text" name="videoTitle" value="" class="form-control" placeholder="Add video title" autocomplete="off">
</label>
<label for="videoUrl" class="mb-3">
<input type="text" name="videoUrl" value="" class="form-control" placeholder="Add video url" autocomplete="off">
</label>
<i class="fileUploader__icon fa fa-film"></i>
<div class="fileUploader__input">
<input class="fileUploader__file" type="file" name="file-videos" id="file-videos" accept="image/x-png,image/gif,image/jpeg">
<label for="file-videos">Click to add a video thumbnail</label>
<p class="fileUploader__dragndrop"> or drag it here</p>
<ul class="small">
<li>File formats: </li>
<li>File size: <span class="file-size-max"></span></li>
</ul>
</div>
<div class="fileUploader__uploading">Uploading...</div>
<div class="fileUploader__success">Complete</div>
<div class="fileUploader__error">Error. <span></span></div>
<a href="#" class="fileUploader__restart fa fa-redo-alt"></a>
<div class="fileUploader-wrapper mt-3 text-right">
<a href="#" class="btn btn-primary btn-submit">Submit</a>
</div>
</div>
I have made a fiddle here: https://jsfiddle.net/lharby/zygw72pr/我在这里做了一个小提琴: https://jsfiddle.net/lharby/zygw72pr/
I kind of understand creating this function and only targeting one selector, but my goal is to make it reusable and it should not matter if there is 1 input or 100.我有点理解创建这个 function 并且只针对一个选择器,但我的目标是使其可重用,无论是 1 个输入还是 100 个输入都无关紧要。
TIA TIA
Filter all the textboxes.过滤所有文本框。 When there are no empty ones, set the class to visible.
当没有空的时,将 class 设置为可见。
var query = "input[type=\"text\"]";
$(query).on("input change", () =>
{
if($(query).filter((a, b) => $(b).val().length == 0).length == 0)
$(".fileUploader-wrapper").addClass("visible");
else
$(".fileUploader-wrapper").removeClass("visible");
});
The problem is the toggling of the class is dependent on only the last input in the collection the way you have written it in the loop like that.问题是 class 的切换仅取决于集合中的最后一个输入,就像您在循环中编写它的方式一样。
You could use filter()
to get collection of the ones that are empty (if any) and use that collection length to determine the class toggling.您可以使用
filter()
来收集那些为空的(如果有的话)并使用该收集长度来确定 class 切换。
Using toggleClass()
with it's boolean second argument is also simpler than writing both addClass()
and removeClass()
in a conditional将
toggleClass()
与它的 boolean 第二个参数一起使用也比在条件条件中同时编写addClass()
和removeClass()
更简单
Something like:就像是:
const toggleElemValidInput = (input, elem, className) => {
const hasEmpty = !!input.filter((i,el) => !el.value.trim()).length;
elem.toggleClass(className, hasEmpty);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.