Question

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

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

这是我的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");

然后我们需要将其从列表中分割出来。可以从图像中重新读取列表，但我觉得操作文本更快：

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左侧

1 个答案: