在javascript中生成第n个子链接的随机背景颜色

Generating random background colour of nth child link in javascript

本文关键字：链接 随机 颜色 背景 javascript      更新时间：2023-09-26

我在html中有大约55个链接，所有链接都具有相同的链接文本，即"购买"。现在在 JavaScript 中，我想使用以下代码随机化链接的背景颜色。它不起作用。我检查了页面中引入和没有jQuery的页面。

代码有什么问题？怎么办？

var num;
var arbt = ["yellow", "green", "blue", "magenta", "red", "white", "lime"];
for (num = 0; num < 55; num++) {
    var ran = Math.floor(Math.random * (arbt.length + 1));
    var colo = arbt[ran];
    $(document).ready(function() {
        $("a:nth-child(num)").css("background-color", colo);
    });
}

jQuery(document).ready(function  () {
  var num;
  var arbt=["yellow","green","blue","magenta","red","white","lime"];
  jQuery("a").each(function (index) { //incase if you want to use index
    var ran = Math.floor(Math.random * (arbt.length + 1));
    var colo = arbt[ran];
    jQuery(this).css('background-color', colo);
  }) 
} )

将文档就绪函数更改为

$(document).ready(function(){
    $("a:nth-child(" + num + ")").css("background-color", colo);
});

基本上num是一个变量，所以a:nth-child(num)改为a:nth-child(" + num + ")

或者干脆做到

$(document).ready(function(){
    $("a").each( function(){
        var ran = Math.floor(Math.random * (arbt.length + 1));
        $( this ).css("background-color", arbt[ran] );
    } );
});

在这里，这有效：

$(document).ready(function  () {
  var num;
  var arbt=["yellow","green","blue","magenta","red","white","lime"];
  $("a").each(function (index) {
    var ran = Math.floor((Math.random() * arbt.length) + 1);
    var colo = arbt[ran];
    $(this).css('background-color', colo);
  }) 
})

这是你的代码笔的一个分支

与其将

变量连接到选择器中，不如使用eq()，这将直接允许变量，并且也从零开始

索引 
$("a").eq(num).css("background-color", colo);
相关文章：