CODEWITHSUNDEEP
phpjquerywordpress
bigdave
bigdave

Reputation: 337

Assign random colours from array to wp category list

I've followed articles on here to assign a random border colour to an element from an array of colours. It works but I'd like to assign a different colour to each instance of the element. The elements in question are a a list of categories generated by the get_categories() function.

As you'll see from the below, Ive tried to implement .each() within the jQuery in the vein hope that it might work.. however it still just applies the same value to all instances of the element with the class slate .

code:

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

Upvotes: 1

Views: 258

Answers (4)

dipmala
dipmala

Reputation: 2011

You can do this directly in php why are you using jquery.

Kindly check below code for the same.

 $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>';
   }

Upvotes: 1

Bambi p&#229; hal is
Bambi p&#229; hal is

Reputation: 39

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

You need to re-random the color inside the foreach loop.

Fiddle here

Upvotes: 0

Programmer
Programmer

Reputation: 2123

It's because you do the random function only once, and apply the value to all of the elements in the each loop. You should do the random inside the loop, so that every element will get a different value.

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

Upvotes: 0

Ronnie Oosting
Ronnie Oosting

Reputation: 1252

A dirty, but do able, solution would be:

$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;

You could put this into a function, so the color will be returned as text and could be reused for other ends.

Documentation rand():

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

Documentation Switch:

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

Edit:

Perhaps you want to have a jQuery solution instead of PHP. But this is just another way to make it happen.

Upvotes: 0

Related Questions