Question

我正在编写照片上传部分，只需点击一下按钮就可以添加和删除div。这可以在这里看到 - fiddle

我正在尝试在添加，删除或重新排序div时使数字计数正常工作。

到目前为止，它似乎在添加div时增加了数字，但在重新排序时它没有更新数字或在删除时更新其他数字。

     // MOVE LEFT AND RIGHT FUNCTION
$( function() {
    $( "#pic-con" ).sortable();
    $( "#pic-con" ).disableSelection();
  });

$(document).on('click', '.pic-left', function (){
  var current = $(this).parents(':eq(1)');
  current.prev().before(current);

});
$(document).on('click', '.pic-right', function (){
  var current = $(this).parents(':eq(1)');
  current.next().after(current);
});

$(function(){
    var div = 0;

// ADD MORE FUNCTION
 $('.add_more').click(function(){
  div++;
   var numItems = $('div.photo-upload-box').length;
  $('#pic-con').append('<div class="photo-upload-box"><div class="photo-upload-img"><img src="https://cdn4.buysellads.net/uu/1/3386/1525211184-62491.png" /></div><div class="photo-upload-field"><input type="file" name="files" class="files" accept="image/png, image/jpeg, image/jpg" /><input type="hidden" name="file1" /></div><div class="photo-upload-settings"><div class="pic-left"><i class="fas fa-angle-left"></i></div><div class="pic-right"><i class="fas fa-angle-right"></i></div><div class="pic-remove remove"><i class="fas fa-times"></i></div>div '+div+' out of '+numItems+'</div><div class="photo-custom-time" style="display:none"><label>Duration time: </label> <input type="text" /></div></div>');
    });

 // REMOVE FUNCTION
 $(document).on("click", ".remove", function(e) { 
        e.preventDefault();
        $(this).parents(':eq(1)').remove();
        var numItems = $('div.photo-upload-box').length;
});
 })();

Answer 1

如果您的目标是更新所有div中的总计数，那么您的html需要有一个类

<div>div '+div+' out of <span class="numItems"></span></div>

所以你可以更新号码

添加

 $('span.numItems').text(numItems+1);

删除

中的

$('span.numItems').text(numItems);

Updated fiddle

jquery添加/删除可排序的div和更新计数

1 个答案: