如何为PHP生成的for-each循环的每次迭代从列表中选择一个随机变量？

Question

For each time my php code loops, it creates a new card for a cart item. I would like to have the background color of the card to be selected randomly from a list for each different card.

I added script to pick a random color and jquery selected the card, but it only changed the first item of the loop, and the rest are unaffected by the the jquery.

HTML + PHP:

<?php foreach($sArray as $sizeString){ ?>
div id="item_card" class = "cart_item_wrapper" >
<?php } ?>

script:

var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
$('#item_card').css('background-color', random_color);

So, this only affects the first item card, I would like for every card's color to be randomly selected from the "colors" variable. Thank you.

Answer 1

PHP:

div class="cart_item_wrapper item_card"

JS:

$('.item_card').css('background-color', random_color);

I know, right?

Answer 2

Make item_card id unique by concatenating a random number or an index of the looping array. Then, pass that to the script function as a parameter and use to apply the color.

For example:

<?php foreach($sArray as $index=> $sizeString){?>
    <div id="item_card<?php echo $index?>" class = "cart_item_wrapper"></div>
<?php } ?>

Then,

function pickColor(index) {
    var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
    $('#item_card' + index).css('background-color', random_color);
}