javascript - 为什么我的图像在双击它们时会移动位置？

Question

我遇到了这个奇怪的问题，当浏览器中上传了多个图像然后双击（喜欢）图像时，图像会自行交换位置。

我已经列出了尝试在我的 JS 代码中调试它但无济于事的尝试清单。

• 尝试给preview变量一个位置absolute（即preview.style.position = "absolute";）。
• 尝试给preview变量一个位置fixed（即preview.style.position = "fixed";）。

这些只是我在众多尝试中命名的两次。我什至不确定我是否走在正确的轨道上。我的代码有什么问题，我该如何解决？

这是一个小提琴https://jsfiddle.net/2vyothpu/

这是我的 HTML：

<div id="file-input-wrapper">
    <input type="file" id="file-input" name="files" style="display: none;"/>
    <label for="file-input" id="LblBrowse">
        Upload your photo!
    </label>
</div>

这是我的 JS：

function previewImages() {
    // HTML for file upload
    // <input id="file-input" type="file">

    var preview = document.createElement('div');
    document.body.appendChild(preview);

    if (this.files) {
        [].forEach.call(this.files, readAndPreview);
    }

    function readAndPreview(file) {
        // Make sure `file.name` matches our extensions criteria
        if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
            return alert(file.name + " is not an image");
        } // else...

        var reader = new FileReader();

        reader.addEventListener("load", function () {
            var image = new Image();
            image.height = 100;
            image.title = file.name;
            image.src = this.result;

            var date = Date.now();
            var d = new Date(parseInt(date, 10));
            var ds = d.toString('MM/dd/yy HH:mm:ss');
            console.log(ds);

            var initialCountOfLikes = 0;
            var zeroLikes = document.createElement('h1');
            var zeroLikesTextNode = document.createTextNode(initialCountOfLikes + " likes");

            zeroLikes.appendChild(zeroLikesTextNode);

            preview.appendChild(image);
            preview.appendChild(zeroLikes);

            image.ondblclick = function (event) {
                if (initialCountOfLikes === 0) {
                    console.log("Inside if block");
                    initialCountOfLikes++;
                    console.log("initialCountOfLikes++ => " + initialCountOfLikes);
                } else if (initialCountOfLikes === 1) {
                    console.log("inside second else if block");
                    initialCountOfLikes--;
                    console.log("initialCountOfLikes-- => " + initialCountOfLikes);
                }
                zeroLikesTextNode.nodeValue = initialCountOfLikes + " likes";
                document.body.appendChild(preview);
            };
        });
        reader.readAsDataURL(file);
    }
}

document.querySelector('#file-input').addEventListener("change", previewImages);

标签： javascriptdebugging

Answer 1

图像交换位置，因为每次双击图像时，它都会附加到正文中。它在 DOM 树中的位置已更改为 body 的最后一个子节点。

这是您的双击处理程序，我已经评论了下面的最后一行，因为这是将图像重新附加到正文从而改变其位置的处理程序。你可以完全删除它，我把它留在那里供参考。

image.ondblclick = function (event) {
    if (initialCountOfLikes === 0) {
        console.log("Inside if block");
        initialCountOfLikes++;
        console.log("initialCountOfLikes++ => " + initialCountOfLikes);
    } else if (initialCountOfLikes === 1) {
        console.log("inside second else if block");
        initialCountOfLikes--;
        console.log("initialCountOfLikes-- => " + initialCountOfLikes);
    }
    zeroLikesTextNode.nodeValue = initialCountOfLikes + " likes";
    // document.body.appendChild(preview);
};