如何从一种方法中替换另一种方法中的变量

Question

我正在做一个可以添加复选框的项目，但首先我创建了一个文本框，然后按完成，然后另一个按钮将用该文本框的值替换该文本框。

当我在不同的方法中使用它们时，变量未定义，当我将它放在相同的方法中时，它在控制台中打印出我需要的 id 的两倍。

下面的第一个是将 id 加倍的那个 - 两者都看控制台。

 $("#addBtn").click(function() { var lastField = $("#buildyourform div:last"); // Getting the id of #buildyourownform and getting the last div var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1; // Changing the Id const fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>"); fieldWrapper.data("idx", intId); // console.log(intId); var fName = $("<input type=\"text\" class=\"fieldname\" />"); var ftype = $("<input type=\"checkbox\" class=\"giannisCheckbox\" />"); fieldWrapper.append(ftype); fieldWrapper.append(fName); $("#buildyourform").append(fieldWrapper); $("#doneBtn").click(function() { // $("#yourform").remove(); $("#buildyourform div").each(function() { var id = "checkbox" + $(this).attr("id").replace("field", ""); console.log(id); var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>"); fName.replaceWith(label); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" id="addBtn" value="Add" /> <input type="button" id="doneBtn" value="Done" /> <fieldset id="buildyourform"></fieldset>

 $("#addBtn").click(function() { var lastField = $("#buildyourform div:last"); // Getting the id of #buildyourownform and getting the last div var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1; // Changing the Id const fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>"); fieldWrapper.data("idx", intId); // console.log(intId); var fName = $("<input type=\"text\" class=\"fieldname\" />"); var ftype = $("<input type=\"checkbox\" class=\"giannisCheckbox\" />"); fieldWrapper.append(ftype); fieldWrapper.append(fName); $("#buildyourform").append(fieldWrapper); }); $("#doneBtn").click(function() { // $("#yourform").remove(); $("#buildyourform div").each(function() { var id = "checkbox" + $(this).attr("id").replace("field", ""); // console.log(id); var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>"); fName.replaceWith(label); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" id="addBtn" value="Add" /> <input type="button" id="doneBtn" value="Done" /> <fieldset id="buildyourform"></fieldset>

Answer 1

尝试这个

 let $buildyourform = $("#buildyourform"); $("#addBtn").click(function() { let intId = $buildyourform.children().length + 1; $("#buildyourform").append(` <div class="fieldwrapper" id="field${intId}"> <input type="checkbox" class="giannisCheckbox" /> <input type="text" class="fieldname" /> </div> `); }); $("#doneBtn").click(function() { $buildyourform.children().each(function() { let $checkbox = $(this).find('.giannisCheckbox'); let $fieldname = $(this).find('.fieldname'); let id = "checkbox" + $(this).attr("id").replace("field", ""); $checkbox.attr('id', id); $fieldname.replaceWith(`<label for="${id}">${$fieldname.val()}</label>`); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" id="addBtn" value="Add" /> <input type="button" id="doneBtn" value="Done" /> <fieldset id="buildyourform"></fieldset>