将从数组中随机选择的相同颜色分配给具有相同类的所有元素

【问题标题】：Assign the same color choosen randomly from an array to all element with the same class将从数组中随机选择的相同颜色分配给具有相同类的所有元素
【发布时间】：2020-02-14 10:14:00
【问题描述】：

我有这个函数可以从数组中随机选择相同的颜色分配给具有相同类的所有元素，但元素同时获得不同的颜色。现在该功能可以工作，但每个 h2 元素都有不同的颜色。我想让所有具有“change_color”类的 h2 元素每次都获得相同的颜色。

jQuery(document).ready(function() {
var colors = ["#FFB24A", "#ED145B", "#55D3D2", "#E8390F", "#787878"];
jQuery(".change_color h2").each(function() {
    jQuery(this).css("color", colors[Math.floor(Math.random() * colors.length)]);
});
});

要对所有元素应用相同的颜色，我需要进行哪些更改？谢谢。

【问题讨论】：

jQuery(".change_color h2").css("color", colors[Math.floor(Math.random() * colors.length)]);

标签： javascript css function math random

【解决方案1】：

您实施的方式计算每次迭代的范围。首先，您需要获取随机颜色，然后分配给所有 H2。

jQuery(document).ready(function() {
    var colors = ["#FFB24A", "#ED145B", "#55D3D2", "#E8390F", "#787878"];
    var randomColor = colors[Math.floor(Math.random() * colors.length)];
    jQuery(".change_color h2").each(function() {
        jQuery(this).css("color", randomColor);
    });
});

【讨论】：

循环是做什么用的？ jQuery(".change_color h2").each(...)
jQuery(".change_color h2") 选择属于 .change_color 类的任何元素的后代的所有 h2 元素并作为数组返回。然后，each() 循环遍历找到的每一个元素。
有什么用？ .css(key, value) 还循环遍历集合的所有元素并应用样式。它不仅仅对第一个元素执行此操作。几乎所有 jQuery 方法都这样做（至少在你“写作”时）。