Случайная комбинация списка и порядок

Question

Я хочу список разных изображений с разными текстами.При загрузке я хочу, чтобы порядок изображений и порядок текста рандомизировались, но каждый элемент списка должен состоять из одного изображения и одного текста.И затем я хочу использовать эту случайную комбинацию для URL.

Итак, допустим, у меня есть:

<ul>
<li><img id="pic1" src="pic1.jpg" /> <h2>Cat</h2></li>
<li><img id="pic2" src="pic2.jpg" /> <h2>Dog</h2></li>
<li><img id="pic3" src="pic3.jpg" /> <h2>Elephant</h2></li>
</ul>

Но я хочу, чтобы эта комбинация была случайной, чтобы следующий посетитель мог увидеть:

<ul>
<li><img id="pic2” src="pic2.jpg" /> <h2>Elephant</h2></li>
<li><img id="pic1” src="pic1.jpg" /> <h2>Dog</h2></li>
<li><img id="pic3” src="pic3.jpg" /> <h2>Cat</h2></li>
</ul>

Кроме того, я также хотел бы знать комбинацию текста и изображения и использовать это для URL, например так:

<ul>
<li><a href="/pic2_elephant"><img id="pic2" src="pic2.jpg" /> <h2>Elephant</h2></a></li>
<li><a href="/pic1_dog"><<img id="pic1" src="pic1.jpg" /> <h2>Dog</h2></li>
<li><a href="/pic3_cat"><<img id="pic3" src="pic3.jpg" /> <h2>Cat</h2></li>
</ul>

Надеюсь, кто-то может мне помочь!

Answer 1

Я опубликую свой ответ, но если @epascarello предоставит один после, я с удовольствием его сниму, так как он предоставил основы того, что я показываю, и я работал над предоставлением работающей скрипки

Прежде всего, я бы, вероятно, не использовал контент, определенный в HTML, в качестве источника ваших списков (текста и изображений).Для их хранения я использовал какие-то массивы.

  var textList = ['Elephant', 'Dog', 'Cat'];
  var imgList = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg']

Предполагая, что ваши массивы всегда будут содержать одинаковое количество данных (т.е. всегда будут иметь одинаковую длину), вы можете просто зациклить длинуодин и выберите случайный из каждого массива и сгенерируйте ваш HTML оттуда:

var textList = ['Elephant', 'Dog', 'Cat'];
var imgList = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'];

var randomImgIndexArr = generateUniqueIndexArray([], imgList);
var randomTextIndexArr = generateUniqueIndexArray([], textList);

function generateUniqueIndexArray(array, list) {
  while(array.length < list.length) {
      var randomIndex = Math.floor(Math.random() * list.length);
      if(array.indexOf(randomIndex) === -1) array.push(randomIndex);
  }

  return array;
}


textList.forEach(function(item, index) {
  var textStr = textList[randomTextIndexArr[index]];
  var image = imgList[randomImgIndexArr[index]];

  var li = $('<li/>');
  var aHref = $('<a/>', { href: textStr + '_' + image, text: textStr });
  var imgElm = $('<img/>', { src: image, id: image });

  $(li).append(aHref).append(imgElm).appendTo($('ul'));
});