复制具有链接输入字段的列表

Question

我在javascript方面是个新手。我正在尝试复制一个列表，每个选项都有输入字段。到目前为止，它是有效的，但是，复制的列表没有显示相关的输入字段。此外，我想使每个字段的总和有一个数据。

​

$(document).ready(function() {
  $("#btn-copy").click(function() {
    var target = $(this).closest(".revenus");
    target.clone(true, true).appendTo(target.parent());
  });
});
$(document).ready(function() {
  toggleFields();
  $("#revenu-type").change(function() {
    toggleFields();
    toggleFields2();
  });

});

function toggleFields() {
  if ($("#revenu-type").val() === "option-1")
    $("#option-a").show();
  else
    $("#option-a").hide();
  if ($("#revenu-type").val() === "option-2")
    $("#option-b").show();
  else
    $("#option-b").hide();
  if ($("#revenu-type").val() === "option-3")
    $("#option-c").show();
  else
    $("#option-c").hide();
  if ($("#revenu-type").val() === "option-4")
    $("#option-d").show();
  else
    $("#option-d").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="revenus">
  <p>Choose type</p>
  <p>revenue:
    <select id="revenu-type" name="dbType">
      <option>Ajouter un autre revenu</option>
      <option value="option-1">Revenu 1</option>
      <option value="option-2">Revenu 2</option>
      <option value="option-3">Revenu 3</option>
      <option value="option-4">Revenu 4</option>
    </select>
  </p>
  <div id="option-a" style="display: flex;">
    <p>Option 1 - a
      <input type="text" name="num-child" />
    </p>
    <p>Option 1 - b
      <input type="text" name="price-1" />
    </p>
  </div>
  <div id="option-b">
    <p>Option 2
      <input type="text" name="price-2" />
    </p>
  </div>
  <div id="option-c">
    <p>Option 3
      <input type="text" name="price-3" />
    </p>
  </div>
  <div id="option-d">
    <p>Option 4
      <input type="text" name="price-4" />
    </p>
  </div>
  <p align="left">
    <input type="button" value="add" id="btn-copy" />
  </p>
</div>

​

Answer 1

此问题存在于您的toggleFields中-当您使用

$("#option-a")...

它将只找到第一个it，因为it必须是唯一的。

因此，首先要做的是将所有的id=更改为class= (并更改相应的选择器)。

您需要在当前.revenus中找到与当前revenu-type相关的.revenus。您可以通过将this传递给toggleFields来做到这一点-只需将this更改为$(this).closest(".revenus")，以便在外部包装器中传递。

在那里，您可以使用：

wrapper.find(".option-a")... 

来获取包装器中的项。

btn-copy点击事件被克隆，所以虽然这应该使用类和事件委派$("document").on("click", ".btn-copy" ...，但它仍然可以与包括事件的克隆一起工作。

在不更改太多现有代码(例如，使用.toggle(bool)而不是if (bool) ..show else ..hide)的情况下，这提供了：

​

$(document).ready(function() {
  $("#btn-copy").click(function() {
    var target = $(this).closest(".revenus");
    target.clone(true, true).appendTo(target.parent());
  });
});
$(document).ready(function() {
  toggleFields($(".revenus").first());
  $(".revenu-type").change(function() {
    toggleFields($(this).closest(".revenus"));
    //toggleFields2();
  });

});

function toggleFields(wrapper) {
  if (wrapper.find(".revenu-type").val() === "option-1")
    wrapper.find(".option-a").show();
  else
    wrapper.find(".option-a").hide();
  if (wrapper.find(".revenu-type").val() === "option-2")
    wrapper.find(".option-b").show();
  else
    wrapper.find(".option-b").hide();
  if (wrapper.find(".revenu-type").val() === "option-3")
    wrapper.find(".option-c").show();
  else
    wrapper.find(".option-c").hide();
  if (wrapper.find(".revenu-type").val() === "option-4")
    wrapper.find(".option-d").show();
  else
    wrapper.find(".option-d").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="revenus">
  <p>Choose type</p>
  <p>revenue:
    <select class="revenu-type" name="dbType">
      <option>Ajouter un autre revenu</option>
      <option value="option-1">Revenu 1</option>
      <option value="option-2">Revenu 2</option>
      <option value="option-3">Revenu 3</option>
      <option value="option-4">Revenu 4</option>
    </select>
  </p>
  <div class="option-a" style="display: flex;">
    <p>
      Option 1 - a
      <input type="text" name="num-child" />
    </p>
    <p>
      Option 1 - b
      <input type="text" name="price-1" />
    </p>
  </div>
  <div class="option-b">
    <p>
      Option 2
      <input type="text" name="price-2" />
    </p>
  </div>
  <div class="option-c">
    <p>
      Option 3
      <input type="text" name="price-3" />
    </p>
  </div>
  <div class="option-d">
    <p>
      Option 4
      <input type="text" name="price-4" />
    </p>
  </div>
  <p align="left">
    <input type="button" value="add" id="btn-copy" />
  </p>
</div>

​