jQuery - fait de masquer tout / afficher cette image div plus générique

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

  •  20-08-2019
  •  | 
  •  

Question

J'ai le code JQuery suivant.

fondamentalement, je vais avoir plusieurs divs qui se chevauchent et une liste de liens à droite de tous ces divs qui se chevauchent. en survolant un lien, le div affecté au lien apparaît en fondu.

J'ai le code suivant et cela fonctionne (il utilise les exemples d'images de la fenêtre par défaut), mais si quelqu'un peut penser à un moyen de l'optimiser ou de le rendre générique, je l'apprécierais. 

<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>

                   


    Montrer le coucher du soleil     Montrer l'hiver     Montrer Blue Hills     Montrer les nymphéas

Merci Matt, TM et kRON, vos réponses ont vraiment aidé.

Je ne pense pas m'être totalement expliqué, mais TM a fourni la réponse que je cherchais.

Je voulais suivre DRY et le code fourni par la marque m'a aidé au mieux cette fois-ci, car il ne m'a pas été nécessaire de modifier mon balisage, mais uniquement le code jQuery.

Encore une fois, merci beaucoup. C'est incroyable à quelle vitesse j'ai eu la réponse. Continuez votre excellent travail.

Était-ce utile?

La solution

La première chose à faire est de remplacer tous ces appels similaires par quelque chose de plus générique.

(note: supposons que tout cela se trouve à l'intérieur 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);
});

L'utilisation de sélecteurs délimités par des virgules est un excellent moyen d'obéir à DRY avec jQuery.

J'utilise $(element).data() pour définir et récupérer des données sur l'élément, dans ce cas, le sélecteur utilisé pour mettre à jour l'élément approprié.

De plus, pour un aspect plus net, vous pouvez utiliser ce qui suit à la place de $(document).ready(), si vous le préférez. C'est exactement la même chose, juste une syntaxe différente. 

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

Autres conseils

J'ai répondu à une question similaire il y a quelques mois jQuery Swapping Elements si cela vous aide.

Matt

Clarrification, où j’ai {id: '1'}, vous devez permuter l’id du div que vous voulez afficher et créer un nom de classe générique sur les autres DIV pour les masquer.

Rappelez-vous que vous pouvez appliquer plusieurs classes à un élément: 

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

ce qui pourrait vous aider si des règles de style sont attachées aux divs originaux.

C'est bien, mais vous aurez besoin d'une approche plus générique des identifiants que vous avez attribués.

La solution la plus rapide qui me vienne à l’esprit est de résumer les divs qui se chevauchent et qui s’affichent en fondu sous un div parent & "; #wrapped &"; Prenez tous les liens et assignez-leur les classes CSS "trigger NAME" où "NAME" correspond à "Sunset", "Winter", etc. Vous pouvez ensuite faire quelque chose comme: 


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

Ce n'est pas la meilleure solution possible, mais j'espère que cela vous donnera une idée.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top