jQuery 从可排序列表中删除项目并更新项目 ID 左侧列表

Question

我有一个可排序图像列表，每个图像都有一个唯一的 ID。我还有一个文本输入（在我的实时网站上它是隐藏的，但出于测试目的我已经显示了它），这个文本输入按照图像的放置顺序显示图像的 ID - 这个列表会在用户更改图像的顺序。

我现在为图像添加了一个 "remove" 按钮，当用户单击此按钮时，相应的图像将被删除。但是，我不能做的是在我的文本输入中更新此更改（即被删除的图像）。

这是我的 jQuery:

jQuery(document).ready(function($) {

$("ul.layers-multi-image-list").sortable({
placeholder: "ui-state-highlight",
update: function(event, ui) {
  var ordering = $.map($("> li img", this), function(el) {
    return el.id
  }).join(",");
  $('.image_ids').val(ordering);
}
});

$('ul.layers-multi-image-list').disableSelection();

$("ul.layers-multi-image-list").on('click', '.layers-multi-image-remove', function() {
$(this).parent().remove();
});
});

我怎样才能做到在删除图像时，文本输入的值也被删除？

这是一个 jFiddle 来展示我目前的工作：

https://jsfiddle.net/5afo47k1/6/

Answer 1

这是一个如何执行此操作的示例：https://jsfiddle.net/Twisty/5afo47k1/7/

jQuery(document).ready(function($) {

  $("ul.layers-multi-image-list").sortable({
    placeholder: "ui-state-highlight",
    update: function(event, ui) {
      var ordering = $.map($("> li img", this), function(el) {
        return el.id
      }).join(",");
      $('.image_ids').val(ordering);
    }
  });

  $('ul.layers-multi-image-list').disableSelection();

  $("ul.layers-multi-image-list").on('click', '.layers-multi-image-remove', function() {
    var imgId = $(this).parent().find("img").attr("id");
    console.log("Removing:", imgId);
    $(this).parent().remove();
    var curList = $('.image_ids').val();
    var st = curList.indexOf(imgId);
    if (st) {
      var end = st + imgId.length;
      console.log("Start: ", st, " End: ", end);
      newList = curList.substring(0, st-1);
      newList += curList.substring(end);
      console.log(newList);
      $('.image_ids').val(newList);
    }
  });
});

我先从 img 标签中收集 ID，然后再将其删除：

var imgId = $(this).parent().find("img").attr("id");

然后我们需要将它从列表中切出。可以 re-read 图片中的列表，但我觉得处理文本更快：

var curList = $('.image_ids').val(); // The current List
var st = curList.indexOf(imgId); // Find if needle is in the list
if (st) { // It is, let's remove it, or do nothing
  var end = st + imgId.length; // 4 numbers in ID
  var newList = curList.substring(0, st-1); // Grab the text before
  newList += curList.substring(end); Ammend the text after
  $('.image_ids').val(newList); // Put it back in the text box
}

希望对您有所帮助。

更新

解决了删除第一张图片时的一个小逻辑错误：https://jsfiddle.net/Twisty/5afo47k1/10/

$("ul.layers-multi-image-list").on('click', '.layers-multi-image-remove', function() {
    var imgId = $(this).parent().find("img").attr("id");
    var curList = $('.image_ids').val();
    console.log("Removing:", imgId, " From: ", curList);
    $(this).parent().remove();
    var st = curList.indexOf(imgId);
    if (st >= 0) {
      var end = st + imgId.length;
      console.log("Start: ", st, " End: ", end);
      var newList = "";
      if (st > 0) {
        newList += curList.substring(0, st - 1);
        newList += curList.substring(end);
      } else {
        newList += curList.substring(end + 1);
      }
      console.log(newList);
      $('.image_ids').val(newList);
    }
  });

jQuery 从可排序列表中删除项目并更新项目 ID 左侧列表

jQuery remove item from sortable list AND update list of item ID's left

jquery

jquery-ui

jquery-ui-sortable