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/

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

2 个答案: