Question

假设我从计算机中选择了四个图像到文件输入表单，并且在上传之前预览了所有四个图像。每个选定的图像都有一个unique id：第一个图像的id为1，第二个图像的id为2，依次为第三个和最后一个图像。

问题是， 如果我删除第二张图片 ，那么image's ID的排列将是：

<img id="img_1"> <img id="img_3"> <img id="img_4">

虽然已从上面的结构中移除了图像编号2的{id <img id="img_2">)。

我想要的是，如果第二张图片被移除，那么第三张图片将改变该图像的位置，其中第三张图片的ID 应为：<img id="img_2">)和第四张图片的ID应为：{<img id="img_3">)

以下是删除图片的代码：

$('body').on('click','.boxclose','',function(e){
   var spanid = $(this).attr('id');
        var splitval = spanid.split('_');
        $('#div_' + splitval[1]).remove();
});

以下是预览图片的代码：

         var ftype = new Array(), count1 = 0;

    $("#imgInput").change(function () {
        readURL(this);

    });
    function readURL(input) {
        var files = input.files;
        var output = document.getElementById("result");



        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var picReader = new FileReader();
            var divid = 'div_' + i;
            var spanid = 'span_' + i;
            var count = 0;
            picReader.addEventListener("load", function (event) {
                var picFile = event.target;
                var picnames = files[count].name;
                var mimetypes = picFile.result.split(',');
                var mimetype1 = mimetypes[0];
                var mimetype = mimetype1.split(':')[1].split(';')[0];
                count++;
                count1++;
                var div = document.createElement("div");
                div.setAttribute('id', 'div_' + count);
                div.setAttribute('class', 'divclass');
                if (mimetype.match('image')) {
                    div.innerHTML = "<img id='img_" +  count1 + "' class='thumbnail' src='" + picFile.result + "'" +
                        "title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count1 + "'>x</span>";

                }

                output.insertBefore(div, null);

            });

            picReader.readAsDataURL(file);
        }
    }

让我们在此FIDDLE中看到，并尝试从计算机中选择四个图像，然后删除第二个图像。然后检查元素。在移除一个图像之后，ID的排列不再构造。

Answer 1

你必须使用id吗？尝试为每个图像添加类，并在最后使用

$('.<classname>').eq(<index of element/image>)

删除图像并自动重新排列ID号码

1 个答案: