Question

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

我想首先在类tempimages[0]的{{1}} img上显示src，在删除该图像后，它会被功能box002删除，之后Drop(ev)应该显示tempimages[i]中的img src，以便同样删除。

如何显示从图像阵列box002到类框tempimages img的图像？

我已经使用函数src将图像分配给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'];

  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
 }
}

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);
  }
};

$(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 element] bgcoclor none

  var pParagraph = ev.target.firstElementChild;
  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;
  margin-top:10px;
  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;
}

Answer 1

我不确定您要达到的目标是100％，但这可能会使您到达想要的目标。每次将幻灯片放到其中一个框上之后，它会随机选择三个项目并更新幻灯片元素中的图像。

我进行了一些更改，请参见代码中有关我为何进行更改的注释。当我第一次看到这段代码时，我不明白需要两个单独的数组，因此我将它们合并为一个数组。

var tempimages = [];

function rvalue() {
  const
    items = [  
      { label: '1', url: 'https://via.placeholder.com/75x75?text=1' },
      { label: '2', url: 'https://via.placeholder.com/75x75?text=2' },
      { label: '3', url: 'https://via.placeholder.com/75x75?text=3' },
      { label: '4', url: 'https://via.placeholder.com/75x75?text=4' },
      { label: '5', url: 'https://via.placeholder.com/75x75?text=5' },
      { label: '6', url: 'https://via.placeholder.com/75x75?text=6' },
      { label: '7', url: 'https://via.placeholder.com/75x75?text=7' },
      { label: '8', url: 'https://via.placeholder.com/75x75?text=8' },
      { label: '9', url: 'https://via.placeholder.com/75x75?text=9' },
      { label: '10', url: 'https://via.placeholder.com/75x75?text=10' }
    ],
    ptags = Array.from(document.querySelectorAll('[name="values"]'));
    
  ptags.forEach(ptag => {
    const
      // Generate a random index.
      randomIndex = Math.floor(Math.random() * items.length),
      // Get the at item from the random index (it is possible the same item
      // gets picked multiple times as there is no check for duplicates).
      item = items[randomIndex];
    // Update the label
    ptag.textContent = item.label;
    // Push the item into the array.
    tempimages.push(item);  
  });
}

function displayAllImages() {
  // Check if there are still images in the array, if not exit.
  if (tempimages.length === 0) {
    return;
  }
  
  const
    // Remove the item at index 0 from the array.
    item = tempimages.shift(),
    // Get the image element.
    image = document.getElementById('slide');
  // Update src attribute so it points to the new URL.
  image.src = item.url;
};

$(function() {
  // On start, do rvalue first. This is taken from the onload in the body
  // as that fired later than this method which meant displayAllImages was
  // called before rvalue.
  rvalue();
  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.currentTarget is a div with class box whereas target can
  // be either the div or the p element. Using currentTarget ensures
  // you know which element you're working with.
  ev.currentTarget.style.backgroundColor = 'initial'; //[value indicate which box element] bgcoclor none

  var pParagraph = ev.currentTarget.firstElementChild;
  ev.currentTarget.removeChild(pParagraph);
  
  // Show the next image in the slider..
  displayAllImages();
}

#container {
  margin-top:-2%;
  white-space:nowrap;
  text-align:center;
  margin-left:20%;
  margin-right:30%;
}

.box {
  background-color: coral;
  width: 60px;
  height:60px;
  margin-top:10px;
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <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>

图像从数组到javascript中类的img src

1 个答案: