Question

如何显示从图像阵列临时图像到类框img src

的图像

我有一个代码，根据从tempimages[]到img的{{1}}，尝试显示从src到id=slide box002的临时图像arrayVariable至ptag[i]。

我已经使用函数displayAllImages()将图像分配给img src id=slide。但它无法显示图像。

box002可以拖放到任何框我想在每次拖放后从tempimages[]到框的img src逐一显示每个图像。如何更改代码以实现此属性？

var tempimages = [];

function rvalue() {
    var array = [];
    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']; //your assumed   
    arrayLength = arrayVariable.length;
    ptags = document.getElementsByName("values");

    for (i = 0; i < ptags.length; i++) {
        ptags[i].textContent = arrayVariable[Math.floor(Math.random() * arrayLength)];
        array.push(ptags[i].textContent);
        tempimages.push(`${ptags[i].textContent}.jpg`); 
    }
		
    console.log(array);
    console.log(tempimages); 
    console.log(slide); 
}
		
function displayAllImages() {
    var i = 0,
        len = tempimages.length;        
    
    for (; i < tempimages.length; i++) {   
        var img = new Image();
        img.src = tempimages[i];
        img.style.width = '100px';
        img.style.height = '100px';
        document.getElementById('slide').appendChild(img);
        document.querySelector("slide").src="document.write(tempimages[i])"; //how to change these codes so thst ech temp images are displayed on img src for drop
    }
};

$(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);

el.parentNode.removeChild; // deleting drag item
ev.target.style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none
  
  /* Added */
  var pParagraph = ev.target.firstElementChild;
  console.log(pParagraph);
  ev.target.removeChild(pParagraph);
  
  alert(el);
}

#container {
    margin-top:-2%;
    white-space:nowrap;
    text-align:center;
    margin-left:20%;
    margin-right:30%;
}

.box {
    background-color: coral;
    width: 60px;
    height:60px;
    display:inline-block;
    border-radius:5px;
    border:2px solid #333;
    border-color: #e6e600;
    border-radius: 10%;
    background-color:  #ffcc00;
}
.box002 {
            float: left;
            width: 50px;
            height: 50px;
            float: left;
			margin-left:30%;
			padding-top:2%;
			background-color:#ffff00 2px;
			border:2px solid #000066;
        }	
.text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
}
    #container {
    white-space:nowrap;
    text-align:center;
	margin-left:20%;
    margin-right:30%;
}

.text {
    padding: 20px;
    margin:7 px;
    margin-top:10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

<body onload="rvalue()">
<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 class="box002" draggable="true" ondragstart="drag(event)" id="2">
    <img src=""  draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded"/>    
</div>    
</body>

Answer 1

更改以下代码，

document.querySelector("slide").src="document.write(tempimages[i])"; //how to change these codes so thst ech temp images are displayed on img src for drop

收件人

document.querySelector("slide").src=tempimages[i]; // Your img paths must be relative to this page url

使用javascript将图像从tempImage加载并显示到imgsrc

1 个答案: