Cambie el color de div para que coincida con otro div usando jquery

Actualmente tengo un total de 4 cuadros con la misma clase y cada uno tiene su propia ID, cuando se hace clic en cualquiera de los cuadros, los colores de fondo de todos los cuadros deben cambiar a los de una ID de div asignada.

Quiero que sea de un color específico como en el ejemplo actual del violín JS, quiero que sea del color que sea un div en particular. es decir, #box2 cambiará de color en .haga clic en el de #box1 y #box1 cambiará al color de #box4. dando así la ilusión de que las cajas se mueven en el sentido de las agujas del reloj. Quiero que esto sea utilizable para un número ilimitado de clics.

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

Ver http://jsfiddle.net/YMqyE/

preguntado el 27 de julio de 12 a las 18:07

2 Respuestas

Te gusta? 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);

        });
    });

Respondido 27 Jul 12, 19:07

¿Qué pasa si jsfiddle es inaccesible? Publique el código relevante dentro de su respuesta, o no es realmente una respuesta. - rana de metal

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

Respondido 01 ago 12, 16:08

Más cortos y menos eficientes. La única razón por la que var $b1 = etc, etc. es para evitar crear el mismo objeto jQuery dos veces para cada cuadrado. - mhollis

@MHollis tiene razón, estás realizando 8 consultas, él está realizando 4. - walter stabosz

@MHollis tiene razón, si el objetivo es el rendimiento. Mi objetivo era un ejemplo más sencillo para alguien que prefiere una creación menos variable y no está tan preocupado por la penalización de rendimiento de hacer selecciones adicionales. - tom halladay

Mi problema es que le estás enseñando malas prácticas a este programador novato. El impacto en el rendimiento de las consultas adicionales es discutible en este ejemplo, pero no lo sería si ese mismo código se ejecutara 10000 veces. Además, independientemente de si crea una variable o no, los objetos jQuery adicionales se crean en la memoria. Todavía tienen que pasar por GC. No está ahorrando ningún recurso al omitir la declaración de variables. Hay algunas buenas reglas de rendimiento de jQuery en artzstudio.com/2009/04/jquery-rendimiento-reglas/… - walter stabosz

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.