JQuery добавить / удалить сортируемые Div и обновления счетчика - PullRequest
Новая
       7

JQuery добавить / удалить сортируемые Div и обновления счетчика

0 голосов
/ 01 июня 2018

Я кодирую раздел загрузки фотографий, где можно добавлять и удалять элементы 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;
});
 })();

1 Ответ

0 голосов
/ 01 июня 2018

Если ваша цель состоит в том, чтобы обновить общее количество во всех делениях, то в вашем html должен быть класс 

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

, чтобы вы могли обновить число

в добавлении 

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

в вашем удалении 

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

Обновленная скрипка

...