使所選圖像與從javascript中的數組中選擇的randomindex相同

Question

我有一個數組音符，上面有九個jpg，一個數組項目有九個標簽和九個網址。

此代碼有三個框從數組項中隨機選擇了3 items項。

我已將隨機選擇的項目label放在3個框內， <P>標簽內，以及數組項目背景上的相應圖像

我已經將randomIndex選擇中的音符的有趣圖像存儲到數組注釋中，這被調用到box002 img src

可以將類box002拖放到顯示的四個框中的相應數字。 然后藍色數字和框中的背景消失。

我現在有一個工作代碼

我的問題是我想box002項目應該與盒子數字相同，現在drop是從左側盒子開始

即如果box002數字是2，那么drop（最左邊的框）應該是藍色2數字，背景url image2

如何更改我的代碼以實現此目的。

  var array2 = []; var items = [{ label: '1', url: 'https://via.placeholder.com/150x150.jpg?text=image1' }, { label: '2', url: 'https://via.placeholder.com/150x150.jpg?text=image2' }, { label: '3', url: 'https://via.placeholder.com/150x150.jpg?text=image3' }, { label: '4', url: 'https://via.placeholder.com/150x150.jpg?text=image4' }, { label: '5', url: 'https://via.placeholder.com/150x150.jpg?text=image5' }, { label: '6', url: 'https://via.placeholder.com/150x150.jpg?text=image6' }, { label: '7', url: 'https://via.placeholder.com/150x150.jpg?text=image7' }, { label: '8', url: 'https://via.placeholder.com/150x150.jpg?text=image8' }, { label: '9', url: 'https://via.placeholder.com/150x150.jpg?text=image9' } ]; var notes = ['https://via.placeholder.com/75x75?text=1', 'https://via.placeholder.com/75x75?text=2', 'https://via.placeholder.com/75x75?text=3', 'https://via.placeholder.com/75x75?text=4', 'https://via.placeholder.com/75x75?text=5', 'https://via.placeholder.com/75x75?text=6', 'https://via.placeholder.com/75x75?text=7', 'https://via.placeholder.com/75x75?text=8', 'https://via.placeholder.com/75x75?text=9' ]; var tempimages = []; var notesselected = []; array2 = items.slice(); var item; function rvalue() { ptags = document.querySelectorAll('[name="values"]'); boxtags = document.getElementsByClassName("box"); for (var index = 0; index < 3; index++) { randomIndex = Math.floor(Math.random() *array2.length) item = array2[randomIndex]; array2.splice(randomIndex, 1); try { ptags[index].style.visibility = "visible"; ptags[index].textContent = item.label; ptags[index].dataset.itemIndex = randomIndex; tempimages.push({data: item,index: randomIndex }); notesselected.push({data: notes[randomIndex], index: randomIndex}); boxtags[index].style.backgroundImage = 'url(' + item.url + ')'; } catch (err) { console.log('Exception'); } } var tlen = tempimages.length; } function displayAllImages() { try { if (tempimages.length == 0) { rvalue(); } var arr2 = notesselected; item = arr2.shift(); image = document.getElementById('slide'); //image.src = "images/"+item.data.url; image.src = item.data; image.dataset.itemIndex = item.index; } catch (err) { console.log(err.message); } }; $(function() { displayAllImages(); }); function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); var el = document.getElementById(data); var x = document.getElementById("slide").dataset.itemIndex; var y = ev.target.dataset.itemIndex; if (x == y) { ev.currentTarget.style.backgroundColor = 'initial'; ev.currentTarget.style.backgroundImage = 'initial'; ev.currentTarget.style.border = 'initial'; var pParagraph = ev.currentTarget.firstElementChild; pParagraph.style.visibility = "hidden"; item = this.item; var arrayvalue = item.dataindex; tempimages.splice(arrayvalue, 1); if (tempimages.length == 0) { rvalue(); } displayAllImages(); } else { alert("WRONG PLACED"); } } 

  body { overflow: hidden; } .box { width: calc(10.3% - 4px); display: inline-block; border-radius: 5px; border: 2px solid #333; border: #000 border-color: #e6e600; margin: -2px; border-radius: 0%; background-color: #99ffff; } .box { height: 15vh; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background-size: contain; } .box002 { position: absolute; top: 10.3vh; left: 40.98vw; cursor: pointer; } .box002 img { width: 14.0vw; height: 23.0vh; border-radius: 50%; } p { font: "Courier New", Courier, monospace; font-size: 30px; color: rgba(0, 0, 0, 0.6); text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3); color: #005ce6; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container2"> <div class="containerr"> <div class="pic" id="content"> <div id="container"> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"> <p name="values"></p> </div> </div> </div> </div> </div> <div class="box002" draggable="true" ondragstart="drag(event)" id="2"> <img src="" draggable="true" id="slide" border="rounded" /> </div> 

Answer 1

我想你在這里遇到了很多問題：

1. 使用索引是一個錯誤的想法，您可以使用標簽作為鍵，因為每個對象都有唯一的項目。
2. 您的displayAllImages返回錯誤的迭代，我已應用適當的過濾器來顯示可用tempImages中的隨機圖像。

你需要照顧的事情：

1. 分配適當的級別
2. 您可以使用1個數組而不是2個音符項。

以下是解決您的問題的演示，以便隨機顯示可用項目中的圖像。

我在代碼中添加了注釋，因此您可以檢查更改。

 var array2 = []; var items = [{ label: '1', url: 'https://via.placeholder.com/150x150.jpg?text=image1' }, { label: '2', url: 'https://via.placeholder.com/150x150.jpg?text=image2' }, { label: '3', url: 'https://via.placeholder.com/150x150.jpg?text=image3' }, { label: '4', url: 'https://via.placeholder.com/150x150.jpg?text=image4' }, { label: '5', url: 'https://via.placeholder.com/150x150.jpg?text=image5' }, { label: '6', url: 'https://via.placeholder.com/150x150.jpg?text=image6' }, { label: '7', url: 'https://via.placeholder.com/150x150.jpg?text=image7' }, { label: '8', url: 'https://via.placeholder.com/150x150.jpg?text=image8' }, { label: '9', url: 'https://via.placeholder.com/150x150.jpg?text=image9' } ]; var notes = ['https://via.placeholder.com/75x75?text=1', 'https://via.placeholder.com/75x75?text=2', 'https://via.placeholder.com/75x75?text=3', 'https://via.placeholder.com/75x75?text=4', 'https://via.placeholder.com/75x75?text=5', 'https://via.placeholder.com/75x75?text=6', 'https://via.placeholder.com/75x75?text=7', 'https://via.placeholder.com/75x75?text=8', 'https://via.placeholder.com/75x75?text=9' ]; var tempimages = []; var notesselected = []; array2 = items.slice(); var item; function rvalue() { ptags = document.querySelectorAll('[name="values"]'); boxtags = document.getElementsByClassName("box"); //if array length is 0 then we need to identify the game as completed if (array2.length === 0) { alert('Game completed'); return; } for (var index = 0; index < 3; index++) { randomIndex = Math.floor(Math.random() * array2.length) item = array2[randomIndex]; array2.splice(randomIndex, 1); try { ptags[index].style.visibility = "visible"; ptags[index].textContent = item.label; ptags[index].dataset.itemLabel = item.label; //using label as an identity tempimages.push({ data: item, label: item.label }); notesselected.push({ data: item.url, label: item.label }); boxtags[index].style.backgroundImage = 'url(' + item.url + ')'; } catch (err) { console.log('Exception'); } } var tlen = tempimages.length; } function displayAllImages() { try { if (tempimages.length == 0) { rvalue(); } if(tempimages.length === 0){ image = document.getElementById('slide'); image.style.display = 'none'; return; } // getting random item from the available items var arr2 = tempimages; item = arr2[Math.floor(Math.random() * arr2.length)] image = document.getElementById('slide'); //getting notes item var dataURL = notes.filter(a => a.indexOf("?text=" + item.label) > 0)[0]; image.src = dataURL; image.dataset.itemLabel = item.label; } catch (err) { console.log(err.message); } }; $(function() { displayAllImages(); }); function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); var x = document.getElementById("slide").dataset.itemLabel; var y = ev.target.dataset.itemLabel; //add improvisation box drag is valid if(ev.target.tagName === "DIV"){ y = ev.target.children[0].dataset.itemLabel; } if (x == y) { ev.currentTarget.style.backgroundColor = 'initial'; ev.currentTarget.style.backgroundImage = 'initial'; ev.currentTarget.style.border = 'initial'; var pParagraph = ev.currentTarget.firstElementChild; pParagraph.style.visibility = "hidden"; item = this.item; tempimages = tempimages.filter(a => a.label !== item.label); if (tempimages.length == 0) { rvalue(); } displayAllImages(); } else { alert("WRONG PLACED"); } } 

 body { overflow: hidden; } .box { width: calc(10.3% - 4px); display: inline-block; border-radius: 5px; border: 2px solid #333; border: #000 border-color: #e6e600; margin: -2px; border-radius: 0%; background-color: #99ffff; } .box { height: 15vh; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background-size: contain; } .box002 { position: absolute; top: 10.3vh; left: 40.98vw; cursor: pointer; } .box002 img { width: 14.0vw; height: 23.0vh; border-radius: 50%; } p { font: "Courier New", Courier, monospace; font-size: 30px; color: rgba(0, 0, 0, 0.6); text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3); color: #005ce6; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container2"> <div class="containerr"> <div class="pic" id="content"> <div id="container"> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11"> <p name="values"></p> </div> <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12"> <p name="values"></p> </div> </div> </div> </div> </div> <div class="box002" draggable="true" ondragstart="drag(event)" id="2"> <img src="" draggable="true" id="slide" border="rounded" /> </div>