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

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>