jQuery - haciendo ocultar todo / mostrar esta imagen div más genérico

votos
1

Tengo el siguiente código jquery.

básicamente tendré varios divs superpuestos y una lista de enlaces a la derecha de todos los divs superpuestos. al pasar el ratón sobre un enlace, el div asignado del enlace se desvanecerá.

Tengo el siguiente código y funciona (usa las imágenes de muestra predeterminadas de Windows), pero si alguien puede pensar en una forma de optimizarlo o hacerlo genérico, lo agradecería.

<html>

<script type=text/javascript>
   $(document).ready(function() {

      $(#trigger1).mouseover(function() {

        $(.contentdiv).addClass(inactive);
        $(#divsunset).removeClass(inactive);
        $(.inactive).fadeOut(500);
        $(#divsunset).fadeIn(500);
      });


      $(#trigger2).mouseover(function() {

        $(.contentdiv).addClass(inactive);
        $(#divwinter).removeClass(inactive);
        $(.inactive).fadeOut(500);
        $(#divwinter).fadeIn(500);

      });

      $(#trigger3).mouseover(function() {

                $(.contentdiv).addClass(inactive);
                $(#divbh).removeClass(inactive);
                $(.inactive).fadeOut(500);
                $(#divbh).fadeIn(500);

      });

      $(#trigger4).mouseover(function() {

                $(.contentdiv).addClass(inactive);
                $(#divwl).removeClass(inactive);
                $(.inactive).fadeOut(500);
                $(#divwl).fadeIn(500);

      });

    });

</script>


<style>
    #divsunset
    {
        position: absolute;
        top: 5px;
        left: 5px;
    }
    #divwinter
            {
                position: absolute;
                top: 5px;
                left: 5px;
    }
    #divbh
                    {
                        position: absolute;
                        top: 5px;
                        left: 5px;
    }
    #divwl
                    {
                        position: absolute;
                        top: 5px;
                        left: 5px;
    }
    #links
                    {
                        position: absolute;
                        top: 800px;
                        left: 700px;
    }
    .inactive
    {
    }
</style>


Show Sunset Show Winter Show Blue Hills Show Waterlillies


Gracias Matt, TM y KRON, sus respuestas realmente ayudaron.

No creo que me haya explicado totalmente, pero TM proporcionó la respuesta que estaba buscando.

Quería seguir DRY y el código TM proporcionado me ayudó mejor esta vez ya que no requería que alterara mi marcado, solo el código jQuery.

De nuevo, muchas gracias. Es sorprendente lo rápido que obtuve la respuesta. Mantener el buen trabajo.

Publicado el 09/12/2008 a las 19:39
fuente por usuario
En otros idiomas...                            


3 respuestas

votos
6

Lo primero que puede hacer, para que sea más limpio, es reemplazar todas esas llamadas similares por algo más genérico.

(nota: asumir que todo esto está dentro de document.ready())

$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
    var selector = $(this).data('target');
    $(".contentdiv").addClass("inactive");
    $(selector).removeClass("inactive");
    $(".inactive").fadeOut(500);
    $(selector).fadeIn(500);
});

Usar selectores delimitados por comas es una excelente manera de obedecer a DRY con jQuery.

Utilizo $(element).data()para establecer y recuperar algunos datos sobre el elemento, en este caso, el selector utilizado para actualizar el elemento apropiado.

Además, solo para un aspecto visual más limpio, puede usar lo siguiente en el lugar de $(document).ready(), si lo prefiere. Es exactamente lo mismo, solo una sintaxis diferente.

$(function() {
   //DOM ready
};
Respondida el 09/12/2008 a las 19:52
fuente por usuario

votos
1

Respondí a una pregunta similar hace algunos meses jQuery Swapping Elements si eso ayuda.

Mate

Aclaración, donde tengo {id: '1'} debes intercambiar el ID del div que deseas mostrar y crear un nombre de clase genérico en los otros DIV para ocultarlos.

Recuerda que puedes aplicar varias clases a un elemento:

<Div class="name1 name2"></div>

lo que podría ayudar si tiene reglas de estilo adjuntas a los divs originales.

Respondida el 09/12/2008 a las 20:06
fuente por usuario

votos
0

Es bueno, pero necesitarás un enfoque más genérico para la identificación que has asignado.

La solución más rápida que se me viene a la mente es terminar con los divs superpuestos que se desvanecen bajo un div principal "# wrapped". Tome todos los enlaces y asígneles clases de CSS 'trigger NAME' donde 'NAME' es 'Sunset', 'Winter', etc. Luego puede hacer algo como:


   $(document).ready(function() {

      $(".trigger").mouseover(function() {

                $(".contentdiv").addClass("inactive");
                $("#wrapper ." + $(this).attr('class')[1]).removeClass("inactive");
                $(".inactive").fadeOut(500);
        $("#wrapper ." + $(this).attr('class')[1]).fadeIn(500);
      });

No es la mejor solución posible, pero espero que te dé una idea.

Respondida el 09/12/2008 a las 20:01
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more