显示数组中的随机内容

Question

我正在做一个网站，在页脚上显示随机的文章。随意的文章应该是4，这些文章不应该重复。如何通过数组进行循环以使其工作。

这是我写的一篇文章的代码和小提琴。谢谢!

小提琴：https://jsfiddle.net/3db8Leor/1/

HTML：

<section class="cities">
  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
  <!--
  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
  -->
</section>

联署材料：

const link = [
'https://www.croatiaweek.com',
'https://www.pinebeach.hr/', 
'https://www.dnevnik.hr/', 
'https://www.costacruises.com/',
'https://www.zadar.hr/',
'https://www.croatia.hr/'
];


const title = [
'Zagreb - Croatia',
'Pakostane - Croatia', 
'Hvar - Croatia', 
'Dubrovnik - Croatia',
'Zadar - Croatia',
'Brac - Croatia'
];

const image = [
'https://www.croatiaweek.com/wp-content/uploads/2015/02/KingTomislav.jpg', 
'https://www.pinebeach.hr/photos/modul_2/18052017224635_pine-beach-pakostane-0020.jpg', 
'https://image.dnevnik.hr/media/images/920x695/Jul2019/61719533.jpg', 
'https://www.costacruises.com/content/dam/costa/inventory-assets/ports/DBV/24-DUBROVNIK_2880x1536.jpg.image.750.563.low.jpg',
'https://www.hdz-zadar.hr/public/img/home/3_mobile.png',
'https://s27135.pcdn.co/wp-content/uploads/2019/06/Brac-island-878x585.jpg.optimal.jpg'
];

const random = Math.floor(Math.random() * title.length);
const city = document.querySelector('.city');

city.href = link[random];
city.querySelector('h2').innerHTML = title[random];
city.querySelector('img').src = image[random];

Answer 1

您可以首先生成一个唯一随机数数组，然后在每个循环中使用索引来设置图像，如下所示：

​

const link = [
  'https://www.croatiaweek.com',
  'https://www.pinebeach.hr/', 
  'https://www.dnevnik.hr/', 
  'https://www.costacruises.com/',
  'https://www.zadar.hr/',
  'https://www.croatia.hr/'
];

const title = [
  'Zagreb - Croatia',
  'Pakostane - Croatia', 
  'Hvar - Croatia', 
  'Dubrovnik - Croatia',
  'Zadar - Croatia',
  'Brac - Croatia'
];

const image = [
  'https://www.croatiaweek.com/wp-content/uploads/2015/02/KingTomislav.jpg', 
  'https://www.pinebeach.hr/photos/modul_2/18052017224635_pine-beach-pakostane-0020.jpg', 
  'https://image.dnevnik.hr/media/images/920x695/Jul2019/61719533.jpg', 
  'https://www.costacruises.com/content/dam/costa/inventory-assets/ports/DBV/24-DUBROVNIK_2880x1536.jpg.image.750.563.low.jpg',
  'https://www.hdz-zadar.hr/public/img/home/3_mobile.png',
  'https://s27135.pcdn.co/wp-content/uploads/2019/06/Brac-island-878x585.jpg.optimal.jpg'
];

const city = document.querySelectorAll('.city');
var arr = [];
while(arr.length < city.length){
  var r = Math.floor(Math.random() * title.length);
  if(arr.indexOf(r) === -1) arr.push(r);
}
city.forEach(function(c, i){ 
  c.href = link[arr[i]];
  c.querySelector('h2').innerHTML = title[arr[i]];
  c.querySelector('img').src = image[arr[i]];
});

<section class="cities">
  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
  
  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>

  <a class="city" target="_blank">
    <img src="" width="200">
    <h2></h2>
  </a>
  
</section>

​

Answer 2

由于这是一个非常简单的用例，您只需要4个随机索引，因此可以执行类似于以下操作的操作(更新您的)：

https://jsfiddle.net/fceLu5mq/

基本上：

function pickFour(max) {
    const indices = [];
    while (indices.length < 4) {
      const nextRand = Math.floor(Math.random()*max);
      if (!indices.includes(nextRand)) {
        indices.push(nextRand);
      }
    }
    return indices;
}