Javascript 使每个<；li>；元素的 colored颜色与随机生成的 colored颜色列表不同(不重复

发布于02月11日

我有一组 colored颜色，然后我随机化了它们.我希望 for each 列表项分配不同的 colored颜色，而不是具有相同 colored颜色的项目或具有重复 colored颜色的项目.

const myList = document.querySelector('.myList');
const listItems = myList.querySelectorAll('li');
const itemColors = ['red', 'green', 'royalblue', 'purple','cornflowerblue', 'sienna','palevioletred','orange'];

listItems.forEach((item, index) => {
  

  let randomColors = itemColors[Math.floor(Math.random() * itemColors.length)];
   item.style.color = randomColors;
  
});

<ul class="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Soup</li>
  <li>Juice</li>
  <li>Beer</li>
  <li>Wine</li>
  <li>Soda</li>
</ul>

推荐答案

一个 idea 是克隆你的itemColors，然后随机排序.

然后，您可以使用此数组中的索引来获取 colored颜色 .

注意:这里的随机排序不是li%随机的，因为从技术上讲，它没有以正确的方式使用排序，但对于这样的事情应该没有问题.此外，这还假设您的 colored颜色数组大于li个元素的数量.

如果以不应该使用的方式使用排序，一个简单的解决方案是映射随机值，并在此基础上进行排序，这将使排序变得稳定.

const randColors = [...itemColors]
  .map((item, index) => ({order:Math.random(), item}))
  .sort((a,b) => a.order - b.order)
  .map(i => i.item);

例如..

const myList = document.querySelector('.myList');
const listItems = myList.querySelectorAll('li');
const itemColors = ['red', 'green', 'royalblue', 'purple','cornflowerblue', 'sienna','palevioletred','orange'];

const randColors = [...itemColors].sort(() => Math.random() - 0.5);

listItems.forEach((item, index) => {
   item.style.color = randColors[index];
});

<ul class="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Soup</li>
  <li>Juice</li>
  <li>Beer</li>
  <li>Wine</li>
  <li>Soda</li>
</ul>

Javascript相关问答推荐

Javascript 使每个<；li>；元素的 colored颜色与随机生成的 colored颜色列表不同(不重复

推荐答案

Javascript相关问答推荐

我的glb文件没有加载到我的three.js文件中

将数据从strapi提取到next.js，但响应延迟API URL

如何在使用fast-xml-parser构建ML时包括属性值？

如何使用侧边滚动按钮具体滚动每4个格？

togglePopover()不打开但不关闭原生HTML popover'

MongoDB中的引用

扫描qr code后出错whatter—web.js

为什么这个JS模块在TypeScript中使用默认属性导入？""

可更改语言的搜索栏

单个HTML中的多个HTML文件

第三方包不需要NODE_MODULES文件夹就可以工作吗？

Rxjs流中生成IMMER不能在对象上操作

为什么当我更新数据库时，我的所有组件都重新呈现？

如果一个字符串前面有点、空格或无字符串，后面有空格、连字符或无字符串，则匹配正则表达式

使每个<；li>；元素的 colored颜色与随机生成的 colored颜色列表不同(不重复

P5JS-绘制不重叠的圆

JAVASCRIPT SWITCH CASE语句：当表达式为'；ALL'；

在传单的图像覆盖中重新着色特定 colored颜色的所有像素

使用Java脚本筛选数组中最接近值最小的所有项

Google OAuth 2.0库和跨域开放程序的问题-策略错误