3

現在、同じクラスのボックスが合計4つあり、それぞれに独自のIDがあります。いずれかのボックスをクリックすると、すべてのボックスの背景色が割り当てられたdivIDの背景色に変わります。

現在の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/を参照してください

4

2 に答える 2

7

このような？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);

        });
    });
于 2012-07-27T18:11:49.677 に答える
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/

于 2012-07-27T18:33:13.313 に答える