Php 将随机颜色从阵列分配到wp类别列表

我已经按照这里的文章从一系列颜色中为元素分配了一个随机的边框颜色。它可以工作，但我想为元素的每个实例指定不同的颜色。所讨论的元素是由

get\u categories（）

函数生成的类别列表

正如您将从下面看到的，我尝试在jQuery中实现

。each（）

，希望它能起作用。。但是，它仍然只是将相同的值应用于类为

slate

的元素的所有实例

代码：

---

一个肮脏但可行的解决方案是：

$random = rand(1, 5);

switch ($random):
    case 1:
        return '#2d45a9'; // blue
        break;
    case 2:
        return '#c7d053'; // yellow
        break;
    case 3:
        return '#0db3db'; // light blue
        break;
    case 4:
        return '#ca3737'; // red
        break;
    case 5:
        return '#5392ba'; // another blue
        break;
endswitch;

您可以将其放入函数中，这样颜色将作为文本返回，并可用于其他目的

文档

rand（）

：

文档

开关

：

编辑：

---

也许您想要一个

jQuery

解决方案，而不是

PHP

。但这只是实现它的另一种方法。

这是因为您只执行一次

随机

函数，并将该值应用于

每个

循环中的所有元素。您应该在循环内执行

random

，这样每个元素都将获得不同的值

j$('.slate').each(function(){
   var random_color = colors[Math.floor(Math.random() * colors.length)];
   j$(this).css('border-color', random_color);
});

您需要在foreach循环中重新随机设置颜色

---

Fiddle

您可以直接在php中执行此操作，为什么要使用jquery

请检查下面的代码是否相同

 $colorarray=array("red","green","yellow"); // color array


  if($categories){
     echo '<div class="col-2-3 push-1-6 clearfix">';
     foreach($categories as $category) {

            $colorkey= array_rand($colorarray,1); // get random key
            $colorval=$colorarray[$colorkey]; // get array value

            echo '<div class="col-1-3 prod-cat-block clearfix"> ';
            $image = get_field('featured_image', 'category_'.$category->term_id);
            $url = get_category_link( $category->term_id );
            echo '<a href="' . $url . '"> <img src="' . $image['url'] . '" />'; 
            echo '<div class="slate '.$colorval.'"><h2 class="cat-title ugly white-txt slate-bk">' . $category->name . '</h2></div></a>';
            echo '</div>';
       } 
       echo '</div>';
   }

$colorarray=数组（“红色”、“绿色”、“黄色”）；//彩色阵列
如果（$类别）{
回声'；
foreach（$categories作为$category）{
$colorkey=array_rand（$colorarray，1）；//获取随机密钥
$colorval=$colorarray[$colorkey]；//获取数组值
回声'；
$image=get\u字段（'characterized\u image'，'category\u'。$category->term\u id）；
$url=get\u category\u链接（$category->term\u id）；
回声'；
回声'；
} 
回声'；
}

IMHO这是更好的解决方案。不过，我可能会改进它，保存最后使用的颜色并跳过该键，这样就不会连续两次使用红色。

j$('.slate').each(function(){
   var random_color = colors[Math.floor(Math.random() * colors.length)];
   j$(this).css('border-color', random_color);
});

var colors = ['#2d45a9', '#c7d053', '#0db3db', '#ca3737', '#5392ba'];   
j$('.slate').each(function(){
    var random_color = colors[Math.floor(Math.random() * colors.length)];
    j$(this).css('border-color', random_color);
});

 $colorarray=array("red","green","yellow"); // color array


  if($categories){
     echo '<div class="col-2-3 push-1-6 clearfix">';
     foreach($categories as $category) {

            $colorkey= array_rand($colorarray,1); // get random key
            $colorval=$colorarray[$colorkey]; // get array value

            echo '<div class="col-1-3 prod-cat-block clearfix"> ';
            $image = get_field('featured_image', 'category_'.$category->term_id);
            $url = get_category_link( $category->term_id );
            echo '<a href="' . $url . '"> <img src="' . $image['url'] . '" />'; 
            echo '<div class="slate '.$colorval.'"><h2 class="cat-title ugly white-txt slate-bk">' . $category->name . '</h2></div></a>';
            echo '</div>';
       } 
       echo '</div>';
   }