使用Javascript将多个图像随机插入不同的表格单元格

Question

我是 Javascript/Jquery 的新手，目前仍在学习，所以我在这里寻求帮助。 我想使用 Javascript/Jquery 将不同的图像随机插入（每次刷新页面时位置都会改变）到表格单元格中，而不是接触 HTML/CSS。

我尝试使用 append 插入图像，但是每个图像都出现在所有不是我想要的表格单元格中。 我也试过 backgroundrepeat: no repeat 但它不起作用。 如果有一些简单的编码可以工作就好了，这样我就更容易理解了。

• 我不能使用 getElementById 因为我分离的 js 文件无法从 HTML 文件中检测到 ID

HTML：

<table id="Image">
<tr>
<td><div class="ImageHere" value=1></div></td>
<td><div class="ImageHere" value=2></div></td>
<td><div class="ImageHere" value=3></div></td>
<td><div class="ImageHere" value=4></div></td>
<td><div class="ImageHere" value=5></div></td>
</tr>
<tr>
<td><div class="ImageHere" value=6></div></td>
<td><div class="ImageHere" value=7></div></td>
<td><div class="ImageHere" value=8></div></td>
<td><div class="ImageHere" value=9></div></td>
<td><div class="ImageHere" value=10></div></td>
</tr>
</table>

我 jQuery 最好的尝试：

$(document).ready(function(){
    $(".ImageHere").append("<img src='images/card.jpg' width='100%' height='100%' />" ) });
});

Answer 1

您的 HTML 无效。 HTMLDivElement没有value属性。 改用data-value 。

这是一个例子。 为简单起见，这里插入<hr />而不是图像。 随意调整。

 const imageDivs = document.querySelectorAll('#Image .ImageHere'); document.getElementById('foo').addEventListener('click', insertRandomHr) function insertRandomHr() { imageDivs[Math.floor(Math.random()*imageDivs.length)].innerHTML += '<hr />'; }

 #Image { width: 100%; } .ImageHere::before { content: attr(data-value); }

 <table id="Image"> <tr> <td> <div class="ImageHere" data-value=1></div> </td> <td> <div class="ImageHere" data-value=2></div> </td> <td> <div class="ImageHere" data-value=3></div> </td> <td> <div class="ImageHere" data-value=4></div> </td> <td> <div class="ImageHere" data-value=5></div> </td> </tr> <tr> <td> <div class="ImageHere" data-value=6></div> </td> <td> <div class="ImageHere" data-value=7></div> </td> <td> <div class="ImageHere" data-value=8></div> </td> <td> <div class="ImageHere" data-value=9></div> </td> <td> <div class="ImageHere" data-value=10></div> </td> </tr> </table> <button id="foo" type="button">Insert &lt;hr /&gt; into random div</button>

提示：如果最初使用这些无效value属性的唯一原因是将其用于将图像随机分配给 div，则您不需要这样做。

Answer 2

我希望能有所帮助！

const divs = [...document.querySelectorAll('.ImageHere')];
const images = 
[
'https://i.pinimg.com/originals/d4/7e/9e/d47e9e4a28894bfbd416b4f53ca15b95.jpg', 
'https://fedoraproject.org/w/uploads/thumb/1/16/Sunset-in-pennsylvania-960px.jpg/285px-Sunset-in-pennsylvania-960px.jpg',
'https://fedoraproject.org/w/uploads/thumb/a/a0/F26-final-night-default-wallpaper-standard.png/300px-F26-final-night-default-wallpaper-standard.png',
'https://eldenring.wiki.fextralife.com/file/Elden-Ring/elden-ring-wiki-screenshot-art-trailer5.jpg?v=1560119240021',
'https://pbs.twimg.com/media/D9oueVsX4AAW3Wk.jpg',
'https://pub-static.haozhaopian.net/static/web/appv2/images/landscape29bb2ef5b72f60c71199d5c22c979eadc.jpg',
'https://images.unsplash.com/photo-1462899006636-339e08d1844e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
'https://picjumbo.com/wp-content/uploads/free-stock-images-1080x720.jpg',
'https://destinations.com.ua/storage/crop/articles/avatar_291_max.jpg',
'https://get.wallhere.com/photo/sunlight-women-outdoors-women-model-portrait-blonde-long-hair-nature-photography-dress-Xenia-Kokoreva-river-fashion-hair-white-clothing-spring-Person-skin-clothing-supermodel-girl-beauty-season-woman-lady-photograph-blond-portrait-photography-photo-shoot-brown-hair-art-model-320309.jpg'
];
const suffelImages = shuffle(images);

function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

divs.forEach((div, i) => {
  div.innerHTML = `<img src="${suffelImages[i]}" />`;
});

// CSS

img {
    width: 300px;
    height: 300px;
}

Answer 3

一种解决方案可能是从您在表格单元格中创建的所有图像容器生成一个随机索引。 然后，您可以在位于生成索引处的图像容器中插入以编程方式创建的图像元素。

例子：

 // Returns a random index, from 0..max const randomIndex = (max) => Math.floor(Math.random() * Math.floor(max)); // Returns an image element with a random image const createImage = () => { const el = document.createElement('img'); el.src = 'https://picsum.photos/100'; return el; }; // List of all image containers const containers = document.querySelectorAll('.ImageHere'); // Generate random index and add an image to the container at that index const index = randomIndex(containers.length); containers[index].appendChild(createImage());

 table { border-collapse: collapse; } td { width: 100px; height: 100px; border: 1px solid black; padding: 0; } img { display: block; }

 <table id="Image"> <tbody> <tr> <td> <div class="ImageHere"></div> </td> <td> <div class="ImageHere"></div> </td> <td> <div class="ImageHere"></div> </td> <td> <div class="ImageHere"></div> </td> <td> <div class="ImageHere"></div> </td> </tr> <tr> <td> <div class="ImageHere"></div> </td> <td> <div class="ImageHere"></div> </td> <td> <div class="ImageHere"></div> </td> <td> <div class="ImageHere"></div> </td> <td> <div class="ImageHere"></div> </td> </tr> </tbody> </table>

Answer 4

您可以先定义需要插入的图像数组，然后使该数组随机排列值，然后使用.forEach JS 函数或.each JQuery 函数循环并将这些图像随机插入到表中

让我们从这段代码开始，阅读我对它的评论以更好地理解我的意思

 var images= ['image1.jpg','test.png','logo.png'] // array of your images var randomArr = [] // new empty array which will have random values for(var i= 0 ; i < images.length;i++){ var item = images[Math.floor(Math.random() * images.length)] // this condition to prevent doublicate elements if(!randomArr.includes(item)){ randomArr.push(item) }else{ i = i - 1; } } // now we have new array with random images // lets start to insert these images into table $("table#Image .ImageHere").each(function(index, value){ if(index > randomArr.length) { // check if elements more than array of images and set default image $(this).html("<img src='default.jpg' />") }else{ $(this).html("<img src='"+randomArr[index]+"' />") } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <table id="Image"> <tr> <td><div class="ImageHere" value=1>ddd</div></td> <td><div class="ImageHere" value=2></div></td> <td><div class="ImageHere" value=3></div></td> <td><div class="ImageHere" value=4></div></td> <td><div class="ImageHere" value=5></div></td> </tr> <tr> <td><div class="ImageHere" value=6></div></td> <td><div class="ImageHere" value=7></div></td> <td><div class="ImageHere" value=8></div></td> <td><div class="ImageHere" value=9></div></td> <td><div class="ImageHere" value=10></div></td> </tr> </table>

Answer 5

document.querySelectorAll('.ImageHere').item(n)

或者

$('.ImageHere').eq(n)

其中n是随机数的索引。