Сделайте выбранные изображения такими же, как randomindex, выбранный из массива в JavaScript

Question

У меня есть массив заметки , на котором девять jpg, а также массив items девять меток и девять URL-адресов.

этот код имеет три поля. Он выбирает 3 items случайным образом из элементов массива.

Я поместил случайно выбранный элемент label в 3 поля, внутри тега <P> и соответствующее изображение на фоне из массива items

Я сохранил соответствующие изображения заметок при выборе randomIndex в массиве notesselected это называется box002 img src

Класс box002 можно перетащить на соответствующий номер в четырех отображаемых полях. затем синие цифры и фон в поле исчезают.

У меня есть рабочий код

Моя проблема в том, что я хочу, чтобы элемент box002 был таким же, как и цифра в поле, теперь выпадение - с левой стороны блока

т.е. если цифра box002 равна 2, капля (крайний левый блок) должна быть синей цифрой 2 с фоновой ссылкой 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 возвращает неправильные итерации, я применил правильный фильтр для отображения случайного изображения из доступных временных изображений.

Вещи, о которых вам нужно позаботиться:

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>