Question

所以我写了一个脚本，让用户可以选择向表单添加多个图像。如果用户选择添加多个图片，则会点击“添加其他图片”＃39;按钮，并添加另一个文件字段。

添加新文件字段时，该字段的ID是唯一的。第一个字段静态设置为＆＃34; 1＆＃34;。如果用户点击“添加其他图片”，则第二个字段的ID为＆＃34; 2＆＃34;，则另一个字段为＆＃34; 3＆＃34;等等。这已经成功。

注意：

我根本没有给他们删除第一个文件字段的选项。

问题：

由于我想检查每个文件字段是否确实准备好上传文件，我已经决定添加一个＆＃39;删除此图片＆＃39;当＆＃39;添加另一个图像时，每个字段旁边都有＆＃39;按钮被选中。

理想情况下，当用户点击“删除此图片”时，按钮，该字段后面的字段的ID都被-1更改。

EG：用户已使用＆＃39;添加其他图片＆＃39;添加了另外五个文件字段。按钮，他们点击了删除此图片＆＃39; ID为＆＃39; 3＆＃39;的文件字段旁边的按钮，表示＆＃39; 4＆＃39;，＆＃39; 5＆＃39;和＆＃39; 6＆＃39;应该成为＆＃39; 3＆＃39;，＆＃39; 4＆＃39;和＆＃39; 5＆＃39;。

修改
当前功能：

相应地减去了id，但是当添加新字段时，它将从之前的计数继续。 EG：如果是文件字段＆＃39; 5＆＃39;和＆＃39; 6＆＃39;删除，然后添加另一个，它被赋予＆＃39; 7＆＃39;。

如果你们中的任何一个人能够帮助我解决这个难题，我们将不胜感激。它有点油炸我的脑袋。

提前致谢，Rich

目前为止我的努力是：

$(document).ready(function() {

var count = 2;
$('#addImage').click(function(){
var countNew = count++;
$('#newsFormContainer #addImage').before( $('<div id="added"><br /><label for="' + countNew + '">Image ' + countNew + '</label class="strong" ><br /><input type="file" class="file" name="' + countNew + '" id="' + countNew + '" accept=".png"></div>'));
$('#newsFormContainer #addImage').before( $('<button id="' +  countNew + '" class="file" onclick="return false;">Remove this image</button>'));


$('button.file').click(function(){
var grabClass = document.querySelectorAll('[class^=file]');

console.log(grabClass)

$(grabClass).attr('id', function(index){
     return index + 1;
});
$(this).prev('#added').remove();
$(this).remove();
});

var inputs = document.querySelectorAll('[file^=file]').length;
document.getElementById('cnt').value = inputs;

});
});

Answer 1

尝试运行此代码;可能这解决了你的问题

＆＃13;

$('#add-item').on('click', function() {
  var indexOfLastItem = parseInt($('ul>li:last').attr('data-index'));
  if(!indexOfLastItem){
    indexOfLastItem = 0;
    }
  indexOfLastItem += 1;
  $('ul').append('<li data-index="' + indexOfLastItem + '">Item ' + indexOfLastItem + '<button>Remove Image</button></li>')
});


/**
 * Dynamically assigning event handler
 *  Other wise it will not work for 'Remove' buttons added in runtime
 *
 */
$(document).on('click', 'li> button', function() {
  var indexOfLi = $(this).parent().attr('data-index');
  var $currentLi = $(this).parents('li');
  var $itemsAfterCurrent = $currentLi.nextAll();
  console.log($itemsAfterCurrent);

  rearrangeItems($itemsAfterCurrent);

  $currentLi.hide('slow', function() {
    $(this).remove();
  })

})

function rearrangeItems($itemsAfterCurrent) {
  $itemsAfterCurrent.each(function() {
    var index = $(this).attr('data-index');
    index = parseInt(index) - 1;
    console.log(index);
    $(this).attr('data-index', index);
    $(this).html('Item ' + index + '<button>Remove Image</button>');
  });
}

＆＃13;

li{
  margin: 5px;
  }
li>button{
  margin: 0 3px;
  cursor: pointer;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-index="1">Item 1 <button>Remove Image</button></li>
  <li data-index="2">Item 2<button>Remove Image</button></li>
  <li data-index="3">Item 3<button>Remove Image</button></li>
  <li data-index="4">Item 4<button>Remove Image</button></li>
  <li data-index="5">Item 5<button>Remove Image</button></li>
  <li data-index="6">Item 6<button>Remove Image</button></li>
</ul>  
<button id="add-item">Add Image</button>

＆＃13;

Answer 2

您需要一个循环来检查已删除图片的ID，并且对于ID大于所有被删除图片的图片，需要从其ID的值中减去1。

从唯一的连接变量中减去1

2 个答案: