在javascript中将图像从数组加载到类内的img标签答案

【问题标题】：load images from array to img tag inside class in javascript在javascript中将图像从数组加载到类内的img标签
【发布时间】：2018-09-13 10:04:00
【问题描述】：

我有两个 div 框 box1、box2，在将 box2 拖到 box1 时，box1 被删除，box2 元素 img 被删除。

我有一个 ArrayImage，它有 10 个图像值 1.jpg 到 10.jpg。我有一个具有 10 个图像值 1.jpg 到 10.jpg 的 arrayVariable。

我有一个名为 temparray 的临时数组，它存储随机选择的值的相应图像

我有一个tempimages.push(${ptags[i].textContent}.jpg);，它将相应的图像推送到 temparray。

我想放置与所选随机值相同的图像，即如果为 box1 选择了 3 和 8

元素 3.jpg 和 8.jpg 应该放在 box2 的 img src 中。

如何实现？

function rvalue() {
    var array = [];
    var tempimages = [];
    var arrayVariable = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
    var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];

    arrayLength = arrayVariable.length;

    ptags = document.getElementsByName("values");
    for (i = 0; i < ptags.length; i++) {
        ptags[i].innerHTML = arrayVariable[Math.floor(Math.random() * arrayLength)];
        array.push(ptags[i].textContent);
        tempimages.push(`${ptags[i].textContent}.jpg`); // want to display array to box002 to imgtag
    }
    console.log(array);
    console.log(tempimages);
}

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);

    el.parentNode.removeChild; // deleting drag item

    ev.target.style.backgroundColor = 'initial'; //[value indicate which box element] bgcoclor none


    /* Added */
    var pParagraph = ev.target.firstElementChild;
    console.log(pParagraph);
    ev.target.removeChild(pParagraph);
   

    alert(el);
}

.box1 {
    background-color: coral;
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 5px;
    border: 2px solid #333;
    border-color: #e6e600;
    margin: -2px;
    border-radius: 10%;
    background-color: #66ff66;
    }
.box2 {
    float: left;
    width: 30px;
    height: 30px;
    background-color:#ffff00 2px;}
p {
    font: "Courier New",
    Courier,
    monospace;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
}

<body onload="rvalue()">
    <div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
        <p name="values">name</p>
    </div>
    <div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
        <p name="values">name2</p>
    </div>
    <div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
        <p name="values">name3</p>
    </div>

    <div class="box2" draggable="true" ondragstart="drag(event)" id="2">
        <img src="" draggable="true" id="slide" style="width:100px; height:100px; border-radius: 50%;" border="rounded" />
    </div>

</body>

【问题讨论】：

我试图修复另一个用户的拙劣编辑，它可能仍然存在问题。
我对您的函数调用中的反引号感到担忧，为了清楚起见，请查看它，因为它在某些方面似乎不正确。 tempimages.push(${ptags[i].textContent}.jpg);
是的，我明白..
我正在尝试将 temimages[] 中的相应图像存储加载到类 box2 中的
有办法吗？

标签： javascript html

【解决方案1】：

这不是一个超级完整的答案，目前没有时间做更好的工作，但这可能会给你一个开始的地方，解决一些问题，它确实会下降，只是不是超级好。

var myapp = {};

function imgCreate(src, alt, title) {
  var img = document.createElement('img');
  img.src = src;
  img.draggable = "true";
  img.border = "rounded";
  if (alt != null) img.alt = alt;
  if (title != null) img.title = title;
  img.class = "slide";
  return img;
}

function rvalue() {
  var array = [];
  var tempimages = [];
  var arrayVariable = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];

  arrayLength = arrayVariable.length;

  ptags = document.getElementsByName("values");
  for (i = 0; i < ptags.length; i++) {
    let rv = Math.floor(Math.random() * arrayLength);
    ptags[i].innerHTML = arrayVariable[rv];
    array.push(ptags[i].textContent);
    tempimages.push(ptags[i].textContent.jpg); // want to display array to box002 to imgtag
    ptags[i].appendChild(imgCreate(ArrayOfImages[i], ArrayOfImages[i], ArrayOfImages[i] + " title"));
  }
  // console.log(array);
  // console.log(tempimages);
}

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);
  // el.parentNode.removeChild; // deleting drag item
  console.log(data);

  ev.target.style.backgroundColor = 'lightblue'; //[value indicate which box element] bgcoclor none

  /* Added */
  // var pParagraph = ev.target.firstElementChild;
  // console.log(pParagraph);
  // ev.target.removeChild(pParagraph);
  // alert(el);
}

window.onload = function() {
  // console.log("loading");
  var ndbox = document.getElementsByClassName("box1");
  var ndval = document.getElementsByName("p");
  for (var i = 0; i < ndbox.length; i++) {
    ndbox[i].addEventListener("dragover", allowDrop, true);
    ndbox[i].addEventListener("drop", drop, true);
  }
  for (var i = 0; i < ndval.length; i++) {
    ndval[i].addEventListener("dragover", allowDrop);
    ndval[i].addEventListener("drop", allowDrop);
  }
}

.box1 {
  background-color: coral;
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
  border-radius: 10%;
  background-color: #66ff66;
}

.slide {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.box2 {
  float: left;
  width: 100px;
  height: 100px;
  float: left;
  clear: both;
  background-color: #ffff00;
  margin-top: 2px;
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
}

<body onload="rvalue()">
  <div class="box1" id="10">
    <p name="values">name</p>
  </div>
  <div class="box1" id="11">
    <p name="values">name2</p>
  </div>
  <div class="box1" id="12">
    <p name="values">name3</p>
  </div>

  <div class="box2" draggable="true" ondragstart="drag(event)" id="2">
    <img src="1.jpg" alt="1.jpg" draggable="true" class="slide" border="rounded" />
  </div>

</body>

【讨论】：