jquery 如何多次使用相同的动态输入字段

bq3bfh9z  于 2022-12-29  发布在  jQuery
关注(0)|答案(1)|浏览(181)

我试图创建动态输入字段,发现此代码,但无法使用此代码两次。我的意思是两个不同的动态输入字段。我已经添加了代码。有有限的输入字段可以添加,在此。请帮助
下面是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();
});
klsxnrf1

klsxnrf11#

代码的主要问题是addNewField函数,这是我在这段代码中唯一修改的地方。

function addNewField() {
  count = totalFields() + 1;
  
  field = $("#dynamic-field-1").clone(true);
  field.attr("id", `dynamic-field-${count}`);
  field.find("input").val("");
  field.find("input").attr('id', `field-${count}`);
  field.css({'margin': '5px 0'});
  $(className + ":last").after($(field));
}

您正在克隆现有元素以创建下一个动态字段,但未更改嵌套input元素的ID。请记住,文档中不能有两个ID相同的元素。
现在,每个输入字段都将有一个渐进式id(使用count),就像您已经使用dynamic-field所做的那样。
我还使用了字符串模板文字,而不是使用串联。
我还应该说,您的par-divpar-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

相关问题