0

我在页面上有一个照片列表，每个都有一个唯一的 id，用户可以单击它们来切换选择照片，当他们单击提交按钮时，我需要将所选照片 id 的数组发送到后端，在选择照片的顺序。

我认为跟踪照片是否被选中的最快方法是使用使用照片 ID 作为键的对象，例如：

var selected = {
    "6272861": true,
    "6272888": true
}

当用户取消选择一张照片时，我只需要delete selected["6272861"].

但这将忽略顺序，如果我使用数组来保留选定的照片：

var selected = ["6272861", "6272888"];

然后当我需要取消选择照片时，我必须遍历数组并删除该项目。

有没有更好的方法？谢谢。

4

2 回答 2

2

这是一些执行您所说的JavaScript：

window.addEventListener("load", function () {
    "use strict";

    var imgClick = function (elemSelected, elemThis) {
        var idIndex;
        if ((idIndex = imgSelected.indexOf(elemThis.id)) === -1) {
            imgSelected.push(elemThis.id);
            elemThis.className = "selected"
        } else {
            imgSelected.splice(idIndex, 1);
            elemThis.className = "unselected";
        };
        console.log(elemSelected);
    }

    var imgDiv = document.getElementById("imgDiv");
    var imgChildren = imgDiv.children;
    var imgElements = [];
    var imgSelected = [];
    var i;

    for (i = 0; i < imgChildren.length; i += 1) {
        imgElements.push(imgChildren[i]);
        imgChildren[i].addEventListener("click", function () {imgClick(imgSelected, this)});
    }
});

以下是相关的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script type="text/javascript" src="imageSelect.js"></script>
<style type="text/css">
    img.unselected {
        border-color: black;
        border-width: 1px;
        border-style: solid;
    }
    img.selected {
        border-color: red;
        border-width: 3px;
        border-style: solid;
    }
</style>
<body>
<div id="imgDiv">
    <img class="unselected" id="img01" src="intrepidWidgets.ico" title="Unselected"/>
    <img class="unselected" id="img02" src="300px-Java_logo_svg.png" title="Unselected"/>
</div>

</body>
</html>

这是一个讨论 Array 全局对象的 indexOf 属性的链接。它可能与 IE 9 之前的 Internet Explorer 存在兼容性问题，但他们有代码来解决这个问题：

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf

这是工作代码的链接。您需要打开控制台查看生成的日志（在 Chrome 中按 F12）：

http://www.quirkscode.com/flat/forumPosts/imgSelect/imageSelect.html

MDN also discusses addEventListener (search for that element name). It is the preferred way now of adding event listeners, but has compatibility issues with IE < 9:

于 2012-09-24T19:24:07.763 回答
0

正如您似乎已经知道的那样，对象不会保持顺序，因此如果顺序很重要，那么您将需要使用数组。

您可以使用以下命令将项目添加到数组的末尾：

selected.push("6272898");

您可以使用简单的功能删除项目：

function removeSelected(item) {
    for (var i = selected.length - 1; i >= 0; i--) {
        if (selected[i] === item) {
             selected.splice(i, 1);
        }
    }
}

注意：这会从后到前搜索数组，因此当删除项目时，我们不必更正/更改循环索引。

于 2012-09-23T03:32:04.853 回答