使所选图像与从javascript

时间：2018-10-30 04:24:03

标签： javascript html html5

我有一个数组注释，上面有9个jpg，上面有一个数组项目，有9个标签和9个网址。

此代码有三个框，它从一个数组项中随机选择了3个items。

我将随机选择的项目label放在3个框内，<P>标签内，并在数组项目

的背景上放置了对应的图像

我已将关于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>

1 个答案:

答案 0 :(得分：2)

我认为您在这里有很多问题：

  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>

相关问题
最新问题