我试图创建动态输入字段,发现此代码,但无法使用此代码两次。我的意思是两个不同的动态输入字段。我已经添加了代码。有有限的输入字段可以添加,在此。请帮助
下面是Html代码
<section class="section a_UFMNX">
<par-div class="par-label"><label for="auth">Author<span>*</span><i class="bi bi-question-circle infor"></i>
<par-sep class="ctooltip">Enter Author's Name</par-sep>
</label></par-div>
<par-div class="par-input-sm">
<par-sep id="dynamic-field-1" class="par-input-sm dynamic-field">
<input class="input-sm in-color" placeholder="Author" type="text" id="field" name="field[]">
</par-sep>
<button type="button" id="add-button" class="addmorebtn">Add More</button>
<button type="button" id="remove-button" class="removebtn" disabled="disabled">Remove Last</button>
</par-div>
</section>
下面是Jquery代码
var buttonAdd = $("#add-button");
var buttonRemove = $("#remove-button");
var className = ".dynamic-field";
var count = 0;
var field = "";
var maxFields = 5;
function totalFields() {
return $(className).length;
}
function addNewField() {
count = totalFields() + 1;
field = $("#dynamic-field-1").clone();
field.attr("id", "dynamic-field-" + count);
field.children("label").text("Field " + count);
field.find("input").val("");
field.css({ 'margin': '5px 0' });
$(className + ":last").after($(field));
}
function removeLastField() {
if (totalFields() > 1) {
$(className + ":last").remove();
}
}
function enableButtonRemove() {
if (totalFields() === 2) {
buttonRemove.removeAttr("disabled");
}
}
function disableButtonRemove() {
if (totalFields() === 1) {
buttonRemove.attr("disabled", "disabled");
}
}
function disableSEC() {
if (totalFields() === maxFields) {
buttonAdd.attr("disabled", "disabled");
}
}
function enableSEC() {
if (totalFields() === (maxFields - 1)) {
buttonAdd.removeAttr("disabled");
}
}
buttonAdd.click(function () {
addNewField();
enableButtonRemove();
disableSEC();
});
buttonRemove.click(function () {
removeLastField();
disableButtonRemove();
enableSEC();
});
1条答案
按热度按时间klsxnrf11#
代码的主要问题是
addNewField
函数,这是我在这段代码中唯一修改的地方。您正在克隆现有元素以创建下一个动态字段,但未更改嵌套input元素的ID。请记住,文档中不能有两个ID相同的元素。
现在,每个输入字段都将有一个渐进式id(使用
count
),就像您已经使用dynamic-field
所做的那样。我还使用了字符串模板文字,而不是使用串联。
我还应该说,您的
par-div
和par-sep
元素在HTML5中是无效的(除非您使用的是自定义元素),整个策略使用<template>
元素可以更好地实现:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
The HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
我还添加了两个自定义元素
<par-div>
和<par-sep>
的定义,这样两个元素现在都默认为display: block;
,无论如何,值得一提的是,如果这些元素的功能没有进一步发展,那么将它们绑定到一个css规则的类就足够了。现在,页面的呈现是准确的,并展示了如何正确定义这些属性。
x一个一个一个一个x一个一个二个x