Question

我目前正在为div添加一些输入字段。还可以选择删除刚刚添加的输入字段。

现在的问题是，如果您添加4个输入字段，并且让我们说您删除了第2个字段。

你会得到这样的东西

ID = 1

ID = 3

ID = 4

现在，当您添加新的时，它将添加id = 5。

所以我们最终得到：

ID = 1

ID = 3

ID = 4

id = 5

JS：

     var iArtist = 1,
         tArtist = 1;
 $(document).on('click', '#js-addArtist', function() {
   var artist = $('#js-artist');
   var liData = '<div class="js-artist"><input id="artiestNaam_' + iArtist + '"><input id="artiestURL_' + iArtist + '"><span class="js-removeArtist">remove</span></div>';
   $(liData).appendTo(artist);
   iArtist++;
   tArtist++;
 });
 $(document).on('click', '.js-removeArtist', function() {
   if (tArtist > 1) {
     $(this).parents('.js-artist').slideUp("normal", function() {
       $(this).remove();
       tArtist--;
     });
   }
 });
 $(document).on('click', '#js-print', function() {
  var historyVar = [];
    historyVar['artiestNaam_0'] = $('#artiestNaam_0').val();
    historyVar['artiestURL_0'] = $('#artiestURL_0').val();
  console.log(historyVar); 
 });

HTML：

<span id="js-addArtist">add</span>
<div id="js-artist">
  <div class="js-artist">
    <input id="artiestNaam_0">
    <input id="artiestURL_0">
    <span class="js-removeArtist">remove</span>
  </div>
</div>
<span id="js-print">print</span>

现在没关系。

现在，对于下一部分，我试图从输入字段中获取数据：

historyVar['artiestNaam_0'] = $('#artiestNaam_0').val();
historyVar['artiestURL_0'] = $('#artiestURL_0').val();

如何确保获取所有输入字段的数据？

Working version

Answer 1

您可以使用减少代码。例如，我将保持它比你的问题更简单，但原则保持不变：

<input name="artiest_naam[]" />
<input name="artiest_naam[]" />
<input name="artiest_naam[]" />

末尾的括号使其成为一个数组。 我们不会在名称中使用任何数字。
当你提交时，它将得到它们的索引，因为它是一个数组，返回类似于：

$_POST['artiestnaam'] = array(
   [0] => "whatever you typed in the first",
   [1] => "whatever you typed in the second",
   [2] => "whatever you typed in the third"
)

如果我要添加和删除一百个输入，保留3个随机输入并提交，那么它仍然是那个结果。代码将为您计算 好的奖励：如果你添加了一些能够改变输入顺序的javascript，它将按用户放置的顺序排序（例如，如果我更改了nuymber 2和3，我的结果将是“一，三，二”）。

Answer 2

<强> Working fiddle

您可以使用input.onkeyup = function(e) { var text = input.value; if ( e.which == 13 ) { input.value = ''; yourFunction(text); } }函数浏览课程each()的所有div：

js-artist

希望这有帮助。

$('.js-artist').each(function(){
  var artiestNaam = $('input:eq(0)',this);
  var artiestURL = $('input:eq(1)',this);

  historyVar[artiestNaam.attr('id')] = artiestNaam.val();
  historyVar[artiestURL.attr('id')]  = artiestURL.val();
});

var iArtist = 1,
    tArtist = 1;
$(document).on('click', '#js-addArtist', function() {
  var artist = $('#js-artist');
  var liData = '<div class="js-artist"><input id="artiestNaam_' + iArtist + '"><input id="artiestURL_' + iArtist + '"><span class="js-removeArtist">remove</span></div>';
  $(liData).appendTo(artist);
  iArtist++;
  tArtist++;
});
$(document).on('click', '.js-removeArtist', function() {
  if (tArtist > 1) {
    $(this).parents('.js-artist').slideUp("normal", function() {
      $(this).remove();
      tArtist--;
    });
  }
});
$(document).on('click', '#js-print', function() {
  var historyVar = [];
  $('.js-artist').each(function(){
    var artiestNaam = $('input:eq(0)',this);
    var artiestURL = $('input:eq(1)',this);

    historyVar[artiestNaam.attr('id')] = artiestNaam.val();
    historyVar[artiestURL.attr('id')]  = artiestURL.val();
  });
  console.log(historyVar); 
});

Answer 3

初始化一个计数变量。这样，如果删除输入字段，则仍会初始化新ID。为了获得每个元素的数据，jQuery有一个方便的windowShouldClose函数来迭代所有元素。

希望这有帮助

each

count = 0;
$("#add").on("click", function() {
    count++;
    $("body").append("<input id='" + count + "'</input>");
});

$("#remove").on("click", function() {
    var index = prompt("Enter the index of the input you want to remove");
    $("input:eq(" + index + ")").remove();
});

$("#log-data").on("click", function() {
    $("input").each(function() {
        console.log($(this).val());
    });
});

#btn-group {
  margin-bottom: 20px;
}

添加输入表单并再次删除它们即可获得所有ID

3 个答案: