CODEWITHSUNDEEP
jquery
Chris Levine
Chris Levine

Reputation: 273

Change color of div to match another div using jquery

I currently have a total of 4 boxes with the same class and each has its own ID, when any of the boxes are clicked, the background colors of all the boxes should change to that of an assigned div ID.

I do want to have it be a specific color as in the current JS fiddle example, I want it to be what ever color a particular div is. i.e. #box2 will change color on .click to that of #box1 and #box1 will change to the color of #box4. thus giving the illusion of the boxes moving clockwise. I want this to be usable for an unlimited number of clicks.

        $(document).ready(function () {
            $('.colorbox').click(function () {
                $('#box1').css('background-color', 'blue');
                $('#box2').css('background-color', 'red');
                $('#box3').css('background-color', 'yellow');
                $('#box4').css('background-color', 'green');           
            });
        });

See http://jsfiddle.net/YMqyE/

Upvotes: 3

Views: 1484

Answers (2)

Tom Halladay
Tom Halladay

Reputation: 5761

$(document).ready(function () {
    $('.colorbox').click(function () {
        var $OddColorOut = $('#box1').css('background-color');

        $('#box1').css('background-color', $('#box4').css('background-color'));
        $('#box4').css('background-color', $('#box3').css('background-color'));
        $('#box3').css('background-color', $('#box2').css('background-color'));
        $('#box2').css('background-color', $OddColorOut);
    });
});

http://jsfiddle.net/thalladay/p92V6/

Upvotes: 2

MHollis
MHollis

Reputation: 1459

Like this? http://jsfiddle.net/YMqyE/2/

$(document).ready(function () {
        $('.colorbox').click(function () {
            var $b1 = $('#box1'),
                $b2 = $('#box2'),
                $b3 = $('#box3'),
                $b4 = $('#box4'),
                box4Color = $b4.css('background-color');
            $b4.css('background-color', $b3.css('background-color'));
            $b3.css('background-color', $b2.css('background-color'));
            $b2.css('background-color', $b1.css('background-color'));
            $b1.css('background-color', box4Color);

        });
    });

Upvotes: 7

Related Questions