Jquery change color of list items randomly

Question

So im new to jquery and I want to make a new navigation menu. I want this jquery script to color my list items randomly in a variety of colors of my choosing. Lets just say red, yellow, green, blue and black. Also it should not be possible to have the same color before and after a color is selected.

Further more I want this menu to have a hover function, so that once you hover one of the list items, all the other list items get the color of grey or another css value.

I hope someone could help me build this.

I know I haven't done much yet.

HTML:

<div id="wrapper">
    <div id="nav">
        <ul id="navigation">
            <li>Home</li>
            <li>About</li>
            <li>Products</li>
            <li>Blog</li>
            <li>Contact</li>
        </ul>
    </div>
</div>

Jquery:

$(document).ready(function() {
    $('#navigation, li').addClass('blue');
});

CSS:

* {
    margin:0px; padding:0px;
}
body {
    background-color:#999;
}

#wrapper {
    width:960px; margin:auto; background-color:#CCC;
}
.blue {
    color:#567;
}

Demo on jsfiddle, link: http://jsfiddle.net/iBertel/vbpXP/11/

Answer 1

Using @massivePenguin's idea Here you go, basically, we create an array, a few css rules with a default hover state of grey on all elements in the list. We end up with this result which has a randomised colour effect.

This is the key that randomises your array. The magic happens here, to make this a better effect, add 5 or so more colours to the array to add to the "random" effect.

colours.sort(function() {return 0.5 - Math.random()});

The above code is the key factor in the below script.

var colours = ['red', 'yellow', 'blue', 'green', 'pink'];
$(document).ready(function() {
    $('#navigation li').hover(function() {
        colours.sort(function() {return 0.5 - Math.random()});
        $(this).addClass(colours[0]);
    }, function() {           
        $(this).removeClass(colours[0]);      
    });
});​

http://jsfiddle.net/shannonhochkins/QkWXN/

Answer 2

1. Put your classes into an array (e.g. var colours = ['red','yellow','green','blue','black'])
2. Shuffle the array (see How to randomize (shuffle) a JavaScript array?)
3. Instantiate a counter variable (e.g. n)
4. Use an .each() function to:
   • Apply the value of the colour array's counter index (eg colours[n]) to the list item on hover
   • Increment the counter variable (e.g. n++)

e.g.

$('#nav li').each(function(){
    var switchColour = colours[n];
    $(this).hover(function(){
        $(this).addClass(switchColour);
    },
    function(){
        $(this).removeClass(switchColour);
    })
    n++;
});

Answer 3

So you can achieve this with the following code:

$('#navigation li').mouseover(function () {
    // this in this context is the currently hovered list DOM element.
    $(this).siblings().addClass('desired-class');
}).mouseout(function () {
    $(this).siblings().removeClass('desired-class');
});

Just a note:

You have the same ID on two different elements. You should change that.

Answer 4

For random colors on load, but not on hover, use this:

$(function(){
    // The list items
    var $listItems = $("#navigation li");
    // Classes we want to use
    var classes = "red yellow green blue black".split(" ");
    // Create a copy of the classes
    var classesToUse = classes.slice(0);

    $listItems.each(function(){
        // Reuse the same classes if we've used all up
        if (classesToUse.length === 0) { classesToUse = classes.slice(0); }
        // Generate a random class, remove that from classesToUse
        // and then add it to the element
        $(this).addClass(
            classesToUse.splice(
                Math.floor(Math.random() * classesToUse.length), 
                1
            ).join("")
        );
    });
});​

If you want a random color on each hover, do this:

$(function(){
    // The list items
    var $listItems = $("#navigation li");
    // Classes we want to use
    var classes = "red yellow green blue black".split(" ");
    // Function to generate a random class
    function getRandomClass() {
        return classes[Math.floor(Math.random() * classes.length)]
    }
    // Bind to hover so that we can generate a new class
    $listItems.hover(function(e){
        var $elm = $(this); 
        if (e.type === "mouseenter") {
            // Generate new class, add it to dataset and class
            var randomClass = getRandomClass();
            $elm.data("class", randomClass).addClass(randomClass);
        } else {
            // Remove previous class, if any
            $elm.removeClass($elm.data("class"));
        }
    });
});

See test-case at jsFiddle

Answer 5

Maybe, something like this? : demo jsFiddle

A color can't be next to the same color. But, it's a random selection, so there can be twice the same color, even if all the colors have not been picked yet.

Edited with hover

var myColors = ['blue', 'red', 'green', 'yellow'], previousRandom = '';

$(function() {
    var li = $('#navigation li');
    li.each(function(i){
        var t = $(this), random;
        do{
            random = Math.floor((Math.random() * myColors.length ));
        }while(random == previousRandom);
        t.addClass(myColors[random]);
        previousRandom = random;
    });

    li.hover(
        function(){ $(this).siblings().addClass('neutral'); },
        function(){ $(this).siblings().removeClass('neutral'); }
    );
});​