Question

我已经关注了此处的文章，以为颜色数组中的元素分配随机边框颜色。它可以工作，但我想为元素的每个实例分配不同的颜色。有问题的元素是由get_categories()函数生成的类别的列表。

正如您从下面看到的那样，我已经尝试在jQuery中实现.each()，希望它可以工作..但是，它仍然只是将相同的值应用于元素的所有实例，并且类slate。

代码：

$taxonomy     = 'range';
$show_count   = false;
$pad_counts   = false;
$hierarchical = true;
$title        = '';
$style        = 'list'; 
$term         = get_queried_object();

$args = array(
  'taxonomy'     => $taxonomy,
  'show_count'   => $show_count,
  'pad_counts'   => $pad_counts,
  'hierarchical' => $hierarchical,
  'title_li'     => $title,
  'style'        => $style, 
  'walker'       => null,
  'number'       => null,
  'hierarchical' => 1,  
  'hide_empty'   => 0,
  'use_desc_for_title' => 1,    
);

$categories = get_categories($args);

?>

    <?php if($categories){
    echo '<div class="col-2-3 push-1-6 clearfix">';
    foreach($categories as $category) {
        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"><h2 class="cat-title ugly white-txt slate-bk">' . $category->name . '</h2></div></a>';
        echo '</div>';
    } 
    echo '</div>';
}

jQuery：

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

Answer 1

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

请检查以下代码是否相同。

var items: [[String: Any]] = []

let dict:[String: Any] = ["latitude": 11.91756,"activity_type": "Flying", "offline": false,"longitude": 87.66988, "accuracy": 0, "actual_speed": 0]
 let dict1:[String: Any] = ["encoded": "uvymA{cayMejhilzA?aC", "activity_type": "Walking", "offline": false]

items.append(dict1)
items.append(dict)

let jsonData = try! JSONSerialization.data(withJSONObject: items, options: [])
let decoded = String(data: jsonData, encoding: .utf8)!

[{"encoded":"uvymA{cayMejhilzA?aC","activity_type":"Walking","offline":false},{"latitude":11.91756,"activity_type":"Flying","offline":false,"longitude":87.669880000000006,"accuracy":0,"actual_speed":0}]

Answer 2

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

$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()：

http://php.net/manual/en/function.rand.php

文档Switch：

http://php.net/manual/en/control-structures.switch.php

编辑：

也许您想使用jQuery而不是PHP的解决方案。但这只是实现它的另一种方式。

Answer 3

这是因为您只执行一次random函数，并将该值应用于each循环中的所有元素。您应该在循环内执行random，以便每个元素都将获得不同的值。

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

Answer 4

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);
});

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

提琴here

将数组中的随机颜色分配给wp类别列表

4 个答案: