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

StackOverflow https://stackoverflow.com/questions/353772

  •  20-08-2019
  •  | 
  •  

Pregunta

tengo el siguiente código jquery.

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

Tengo el siguiente código y funciona (usa las imágenes de muestra de las ventanas predeterminadas), 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>

                   


    Mostrar puesta de sol     Mostrar invierno     Mostrar colinas azules     Mostrar nenúfares

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ó mucho esta vez, ya que no requería que modificara mi marcado, solo el código jQuery.

Nuevamente, muchas gracias. Es sorprendente lo rápido que obtuve la respuesta. Sigan con el gran trabajo.

¿Fue útil?

Solución

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

(nota: suponga 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 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 una apariencia visual más limpia, puede usar lo siguiente en lugar de $(document).ready(), si lo prefiere. Es exactamente lo mismo, solo una sintaxis diferente. 

$(function() {
   //DOM ready
};

Otros consejos

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

Matt

Clarificación, donde tengo {id: '1'}, debe intercambiar la identificación del div que desea mostrar y crear un nombre de clase genérico en los otros DIV para ocultarlos.

Recuerde que puede aplicar múltiples clases a un elemento: 

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

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

Es bueno, pero necesitará un enfoque más genérico para las identificaciones que ha asignado.

La solución más rápida que viene a la mente es envolver los divs superpuestos que se desvanecen bajo un div padre " #wrapped " ;. Tome todos los enlaces y asígneles clases CSS 'NAME de activación' 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.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top