时间戳

首页 > 解决方案 > 显示数组中的随机内容

javascript - 显示数组中的随机内容

问题描述

我正在开发一个在页脚中显示随机文章的网站。随机文章应为 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>

JS：


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];

标签： javascript

解决方案

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

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>

推荐阅读