jquery - 如何在 jQuery 中迭代类？

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>