Javascript 如何编写用于随机化属性颜色的函数

我在身体内部有一个网格元素，编码如下：

<ul>
<li data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my description</p>  
    </div>                                
</li>
</ul>

---

因为我不熟悉JavaScript，所以应该如何编写它呢？

如果您使用jQuery，您可以这样做：

<ul>
<li data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my description</p>  
    </div>                                
</li>
</ul>

只需使用RGB属性即可 使用

Math.floor（（Math.random（）*250）+1）
您可以从0-250生成3个不同的值。
请记住：rgb与
（0-250，0-250，0-250）一起工作

现在你只需要拿你的东西。让它看起来很漂亮
对于本例，我将随机化背景颜色，因为我不知道
数据缩略图覆盖颜色=”

使用jQuery，设置标记的id，生成十六进制颜色代码，并使用attr（）函数进行设置：

<ul>
<li id="theTag_1" data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my description</p>  
    </div>                                
</li>
<li id="theTag_2" data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my second description</p>  
    </div>                                
</li>
... // more elements here with unique id each ("theTag_" + number)
</ul>

<script>
function setColorToID(id) {
    var hexNumbers = '0123456789ABCDEF'.split(''); // convert to array
    var color = '#';
    for (var x = 0; x < 6; x++ ) {
       color += hexNumbers[Math.floor(Math.random() * 16)];
    }
    $(id).attr("data-thumbnail-overlay-color" , color);
}

$('[id^="theTag_"]').each(function(){
        setColorToID(this.id);
    });
</script>



我的描述


我的第二个描述

... // 这里有更多元素，每个元素都有唯一的id（“标签号”+编号）

函数setColorToID（id）{
var hexNumbers='0123456789ABCDEF'.split（''）；//转换为数组
var color='#'；
对于（变量x=0；x<6；x++）{
颜色+=十六进制数字[Math.floor（Math.random（）*16）]；
}
$（id）.attr（“数据缩略图覆盖颜色”，颜色）；
}
$（'[id^=“theTag_”]'）。每个（函数（）{
setColorToID（this.id）；
});

如果不想为每个设置和id，并且这是页面中的唯一列表：

    <script>
    function setColorToID(id) {
        var hexNumbers = '0123456789ABCDEF'.split(''); // convert to array
        var color = '#';
        for (var x = 0; x < 6; x++ ) {
           color += hexNumbers[Math.floor(Math.random() * 16)];
        }
        $(id).attr("data-thumbnail-overlay-color" , color);
    }

$("li").each(function() {
            setColorToID(this);
        });
    </script>


函数setColorToID（id）{
var hexNumbers='0123456789ABCDEF'.split（''）；//转换为数组
var color='#'；
对于（变量x=0；x<6；x++）{
颜色+=十六进制数字[Math.floor（Math.random（）*16）]；
}
$（id）.attr（“数据缩略图覆盖颜色”，颜色）；
}
$（“li”）。每个（函数（）{
setColorToID（这个）；
});

函数get\u random\u color（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（var i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*letters.length）]；
} 
返回颜色；
}
函数GRC（）{
变量r='rgba（'+Math.floor（Math.random（）*255）+'、'+Math.floor（Math.random（）*255）+'、'+Math.floor（Math.random（）*255）+'、'+Math.random（）+'）；
返回r；
}
var lis=document.queryselectoral（'li'）；
对于（i=0；i你已经尝试过什么？@BenM你好，Ben，我尝试过：
var-liIterator=document.getElementsByTagName（“li”）；对于（var-i=0；i
但我在JavaScript中完全是一个灾难：（嗨，我在
中有很多元素，所以我不能使用唯一的id。你可以用一个相似的id（commonId+数字）获取所有的id，并使用foreach循环。一秒钟后，我正在编辑以添加这些元素。。好的，但使用此解决方案，我必须手动更改所有id：（你如何建立这个列表？从数据库中？然后你将拥有每个元素的唯一id，使用它，你不需要像我说的那样使用数字。它将与id=“theTag_whateveryouwantbutnotreplicated”一起工作，可能是无序的数字、字母或stings。这个列表是在不使用任何id的情况下建立的（如我上面的代码所示），并解析为JavaScriptHi，我的
表中有许多项，因此我如何使用此解决方案来达到我的目的（我无法手动更改所有
id
），正如@Carlos M.Meyer刚刚注意到的那样，“对于十六进制字母，长度始终为16，不需要在每个循环中重新计算。”.我更喜欢使用
字母.length
，因为如果你只需要一系列颜色，它就不会断裂。
    <script>
    function setColorToID(id) {
        var hexNumbers = '0123456789ABCDEF'.split(''); // convert to array
        var color = '#';
        for (var x = 0; x < 6; x++ ) {
           color += hexNumbers[Math.floor(Math.random() * 16)];
        }
        $(id).attr("data-thumbnail-overlay-color" , color);
    }

$("li").each(function() {
            setColorToID(this);
        });
    </script>