jQuery: rende Nascondi tutto/Mostra questa immagine div più generica

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

  •  20-08-2019
  •  | 
  •  

Domanda

ho il seguente codice jquery.

fondamentalmente avrò diversi div sovrapposti e un elenco di collegamenti sulla destra di tutti quei div sovrapposti.quando si passa con il mouse su un collegamento, il div assegnato al collegamento apparirà in dissolvenza.

Ho il seguente codice e funziona (utilizza le immagini di esempio predefinite di Windows), ma se qualcuno riesce a pensare a un modo per ottimizzarlo o renderlo generico, lo apprezzerei.

<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

Grazie Matt, TM e kRON, le tue risposte mi hanno davvero aiutato.

Non sento di essermi spiegato completamente, ma la Meditazione Trascendentale ha fornito la risposta che stavo cercando.

Volevo seguire DRY e il codice fornito da TM mi ha aiutato meglio questa volta poiché non richiedeva di modificare il mio markup, ma solo il codice jQuery.

Ancora una volta, grazie mille.È incredibile la rapidità con cui ho avuto la risposta.Continuate così.

È stato utile?

Soluzione

La prima cosa che puoi fare, per renderlo più pulito è sostituire tutte quelle chiamate simili con qualcosa di più generico.

(nota: supponi che tutto questo sia all'interno di 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);
});

L'uso di selettori delimitati da virgole è un ottimo modo per obbedire a DRY con jQuery.

Uso $(element).data() per impostare e recuperare alcuni dati sull'elemento, in questo caso il selettore utilizzato per aggiornare l'elemento appropriato.

Inoltre, solo per un aspetto visivo più pulito, puoi utilizzare quanto segue al posto di $(document).ready(), se lo preferisci. È esattamente la stessa cosa, solo una sintassi diversa. 

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

Altri suggerimenti

Ho risposto a una domanda simile alcuni mesi fa jQuery Swapping Elements se questo aiuta.

Matt

Chiarimento, dove ho {id: '1'} dovresti scambiare l'id del div che vuoi mostrare e creare un nome di classe generico sugli altri DIV per nasconderli.

Ricorda che puoi applicare classi multiple a un elemento: 

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

che potrebbe aiutare se hai delle regole di stile associate ai div originali.

Va bene, ma avrai bisogno di un approccio più generico agli ID che hai assegnato.

La soluzione più rapida che mi viene in mente è racchiudere i div sovrapposti che sfumano sotto un div genitore "#wrapped".Prendi tutti i collegamenti e assegna loro le classi CSS 'trigger NAME' dove 'NAME' è 'Tramonto, 'Inverno', ecc.Quindi puoi fare qualcosa del tipo:


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

Non è la migliore soluzione possibile, ma spero che ti dia un'idea.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top