Вставьте несколько изображений случайным образом в разные ячейки таблицы, используя Javascript

Question

Я довольно новичок в Javascript / Jquery, в настоящее время все еще учусь и поэтому здесь я ищу помощь. Я хотел бы вставлять разные изображения случайным образом (местоположение меняется каждый раз, когда я обновляю sh страницу) в ячейках таблицы, используя Javascript / Jquery и не касаясь HTML / CSS.

Я пытался использовать append для вставки изображений, однако каждое изображение появляется во всех ячейках таблицы, что было не тем, что я хотел. Я также пробовал backgroundrepeat: без повтора, но он не работает. Было бы хорошо, если бы было какое-то простое кодирование, которое бы работало, поэтому мне будет легче понять.

• Я не могу использовать getElementById, потому что мой отдельный js файл не может обнаружить Идентификатор из HTML файла

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>

my jQuery Лучшая попытка:

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

Answer 1

Вы можете сначала определить массив ваших изображений, которые нужно вставить, затем сделать так, чтобы этот массив располагал значения случайным образом, затем используя функцию .forEach JS Или .each JQuery Функция для l oop и вставьте их изображения в вашу таблицу случайным образом

давайте начнем с этого кода и прочитаем мои комментарии к нему, чтобы понять, что я имею в виду лучше

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 2

Одним из решений может быть генерирование случайного индекса из всех контейнеров изображений, которые вы создали в ячейках таблицы. Затем вы можете вставить программно созданный элемент изображения в контейнер изображений, расположенный в созданном индексе.

Пример:

// 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 3

Ваш 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 4

Я надеюсь, что это может помочь!

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 5

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

или

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

, где n - индекс случайного числа.