Question

问题是所有的卡都是相同的颜色，我想要的是每张卡在页面加载时随机给出五种颜色中的一种。

以下是我尝试使用的代码：

$( document ).ready(function() {
    oneToFive = Math.floor((Math.random() * 5) + 1);
    switch (oneToFive) {
        case 1:
            randColor = "rgba(255, 255, 255, 0.25)";
            break;
        case 2:
            randColor = "rgba(0, 0, 255, 0.25)";
            break;
        case 3:
            randColor = "rgba(0, 0, 0, 0.25)";
            break;
        case 4:
            randColor = "rgba(255, 0, 0, 0.25)";
            break;
        case 5:
            randColor = "rgba(0, 255, 0, 0.25)";
            break;
        default:
            randColor = "rgba(122, 122, 122, 0.25)";
            break;
    }

    $(".card-color").each(function(){
        $(".card-color").css("background-color", randColor);
    });
});

Answer 1

您的逻辑主要问题是您只在页面加载时生成randColor一次。要使其按您的要求工作，您需要在each()处理程序中生成随机颜色。您还需要使用this关键字仅引用该处理程序中的当前元素。

您还可以使用数组而不是switch使代码更简洁。试试这个：

var colours = ['rgba(255, 255, 255, 0.25)', 'rgba(0, 0, 255, 0.25)', 'rgba(0, 0, 0, 0.25)', 'rgba(255, 0, 0, 0.25)', 'rgba(0, 255, 0, 0.25)', 'rgba(122, 122, 122, 0.25)'];

$(".card-color").each(function() {
  var rnd = Math.floor(Math.random() * 5);
  $(this).css("background-color", colours[rnd]);
});

.card-color {
  width: 20px;
  height: 20px;
  margin: 5px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-color"></div>
<div class="card-color"></div>
<div class="card-color"></div>
<div class="card-color"></div>
<div class="card-color"></div>
<div class="card-color"></div>
<div class="card-color"></div>
<div class="card-color"></div>
<div class="card-color"></div>
<div class="card-color"></div>

Answer 2

几个问题：

您需要在每次想要颜色时调用随机函数，而不是只需一次，否则它将始终是相同的值
您需要在单个元素上设置css，而不是所有与该类匹配的元素。在each函数中，您可以使用this

以下是一个完整的例子：

$( document ).ready(function() {
    $(".card-color").each(function(){
        $(this).css("background-color", getRandomColor());
    });
});

function getRandomColor(){
    var randColor = '';
    var oneToFive = Math.floor((Math.random() * 5) + 1);
    switch (oneToFive) {
        case 1:
            randColor = "rgba(255, 255, 255, 0.25)";
            break;
        case 2:
            randColor = "rgba(0, 0, 255, 0.25)";
            break;
        case 3:
            randColor = "rgba(0, 0, 0, 0.25)";
            break;
        case 4:
            randColor = "rgba(255, 0, 0, 0.25)";
            break;
        case 5:
            randColor = "rgba(0, 255, 0, 0.25)";
            break;
        default:
            randColor = "rgba(122, 122, 122, 0.25)";
            break;
    }
    return randColor;
}

Answer 3

将switch语句保留在每个函数中。所以它总会得到新的颜色。

Answer 4

试试这个example

{{1}}

如何在jQuery中迭代类？

4 个答案: