Назначьте случайные цвета из массива в список категорий WP
Я следил за статьями здесь, чтобы назначить случайный цвет границы элементу из массива цветов. Это работает, но я хотел бы назначить разный цвет для каждого экземпляра элемента. Рассматриваемые элементы представляют собой список категорий, созданный функцией get_categories().
Как вы увидите ниже, Ive пытался реализовать .each() в jQuery в надежде, что это может сработать ... однако он по-прежнему применяет одно и то же значение ко всем экземплярам элемента с классом 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);});
Ответы 4
Грязное, но выполнимое решение:
$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():
Документация Switch:
Редактировать:
Возможно, вы хотите использовать решение jQuery вместо PHP. Но это всего лишь еще один способ добиться этого.
Это потому, что вы выполняете функцию random только один раз и применяете значение ко всем элементам в цикле each. Вы должны выполнить random внутри цикла, чтобы каждый элемент получил свое значение.
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);
});
Вам нужно изменить случайный цвет внутри цикла foreach.
Скрипка здесь
Вы можете сделать это прямо в 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>';
}
хотя я бы, вероятно, улучшил его, сохранив последний использованный цвет и пропустив этот ключ, чтобы не использовать red два + раза подряд.
ИМХО это лучшее решение.