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 では addEventListener についても説明しています (その要素名を検索してください)。現在、イベント リスナーを追加する方法として推奨されていますが、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 に答える