選擇圖片的同時保持訂單

我在頁面上有一張照片列表，每個圖片都有一個唯一的ID，用戶可以點擊它們來切換選擇照片，當他們點擊提交按鈕時，我需要發送數組選擇照片ID到後端，按照照片被選中的順序。選擇圖片的同時保持訂單

我認爲要跟蹤的最快方式，如果選擇照片是使用對象，使用照片的身份證件爲重點，如：

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

當用戶取消選擇一張照片，我只需要delete selected["6272861"] 。

但是，這將忽略順序，如果我使用一個數組來保持選定的照片：

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

然後當我需要取消選擇一張照片，我通過數組必須循環和刪除的項目。

有沒有更好的方法？謝謝。

來源

2012-09-23 wong2

下面是一些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>

這裏是討論全球數組對象的財產的indexOf的鏈接。這可能與Internet Explorer的兼容性問題，IE 9之前，但他們的代碼來解決這個問題：

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-24 19:24:07 Aeoril

正如你似乎已經知道，對象不保留順序，所以如果順序是重要的，那麼你會想要使用一個數組。

您可以將項目添加到與陣列的末尾：

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

注：

selected.push("6272898");

你可以用一個簡單的函數刪除一個項目它會搜索從回陣列所以當一個項目被刪除時，我們不必糾正/更改循環索引。

來源

2012-09-23 03:32:04 jfriend00

選擇圖片的同時保持訂單

回答

相關問題