jQueryでクラスを反復処理する方法は？

Question

問題はすべてのカードが同じ色であることですが、私が望むのは、ページが読み込まれたときにランダムに5色のうちの1つを各カードに与えることです。ここで

は、私が使用しようとしていますコードです：

$(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の代わりに配列を使用すると、コードをより簡潔にすることもできます。各関数内であなたの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

：これを試してみてください。だから常に新しい色を得るでしょう。問題の

Answer 3

カップル：

1. あなたは色をするたびに、一度だけ、それ以外の場合は、常にあなたは、CSSを設定する必要が同じ値

2. なりませんランダム関数を呼び出す必要があります個々の要素には、クラスに一致する要素はすべてありません。 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 4

このexample

var all = $(".card-color").map(function() { 
oneToFive = Math.floor((Math.random() * 5) + 1); 
switch (oneToFive) { 
    case 1: 
     randColor = 'red'; 
     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; 
} 
$(this).css('background-color', randColor); 
}).get()