Faire en sorte que les images sélectionnées soient les mêmes que celles sélectionnées par Randomindex dans un tableau en javascript

Question

J'ai un tableau notes contenant neuf jpg, et un tableau articles neuf étiquettes et neuf adresses URL.

ce code a trois cases Il a sélectionné 3 items de façon aléatoire à partir d'un tableau d'éléments.

J'ai placé les articles sélectionnés au hasard label à l'intérieur de 3 boîtes, à l'intérieur <P> et l'image d'arrière-plan correspondante dans le tableau articles

J'ai stocké les images correspondantes des notes sur la sélection randomIndex dans un tableau. notes sélectionnées Ceci est appelé pour box002 img src

Classe boîte002 peut être glissé et déposé sur le chiffre correspondant dans les quatre cases affichées. Le chiffre bleu et l'arrière-plan de la case disparaissent alors.

J'ai maintenant un code qui fonctionne

Mon problème est que je veux que l'élément box002 soit le même que l'élément box digit, alors que le drop est un formulaire qui commence par la gauche.

Par exemple, si le chiffre de la case 002 est 2, la goutte (case la plus à gauche) doit être un chiffre bleu 2 avec une image de fond image2.

comment modifier mon code pour que cela se produise.

    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

Je pense qu'il y a beaucoup de choses qui ne vont pas ici :

1. L'utilisation de l'index est une mauvaise idée, vous pouvez utiliser l'étiquette comme clé car vous avez un élément unique pour chaque objet.
2. Votre displayAllImages renvoie des itérations erronées, j'ai appliqué le filtre approprié pour afficher l'image aléatoire à partir des tempImages disponibles.

Les choses dont vous devez vous occuper :

1. Attribuer les niveaux appropriés
2. Vous pouvez éventuellement utiliser un tableau au lieu de deux notes, éléments.

Voici la démo qui vous permettra de résoudre votre problème et d'afficher l'image à partir des éléments disponibles de manière aléatoire.

J'ai ajouté des commentaires au code, afin que vous puissiez vérifier les changements.

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>