jquery - 使用 jquery 更改 div 的颜色以匹配另一个 div

Question

我目前共有 4 个具有相同类的框，每个框都有自己的 ID，当单击任何框时，所有框的背景颜色都应更改为分配的 div ID 的背景颜色。

我确实想让它成为当前 JS 小提琴示例中的特定颜色，我希望它成为特定 div 的颜色。即#box2 将在.click 上将颜色更改为#box1 的颜色，而#box1 将更改为#box4 的颜色。从而产生盒子顺时针移动的错觉。我希望它可用于无限次点击。

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

见http://jsfiddle.net/YMqyE/

Answer 1

像这样？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);

        });
    });

Answer 2

$(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/