jQuery - machen Alle verbergen / zeigen dieses div Bild allgemeineren

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

  •  20-08-2019
  •  | 
  •  

Frage

Ich habe den folgenden jQuery-Code.

im Grunde werde ich mehrere überlappte divs haben und eine Liste von Links auf der rechten Seite von all diesen überlappt divs. wenn sie über einen Link schwebt, die zugewiesene divs Link wird verblassen in.

Ich habe den folgenden Code und es funktioniert (es verwendet die Beispielbilder Standard-Windows), aber wenn jemand einen Weg finden kann, es zu optimieren oder sie generische machen, ich würde es zu schätzen wissen. 

<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     Zeige Winter     Show Blue Hills     Show Waterlillies

Danke Matt, TM und Kron, Ihre Antworten hat mir sehr geholfen.

Ich fühle mich nicht, erklärte ich mich total, aber TM vorgesehen, um die Antwort, die ich suchte.

wollte ich DRY und der Code TM folgt bereitgestellt half mir am besten, diese Zeit, da es nicht für mich erfordern meinen Markup zu ändern, sondern nur den jQuery-Code.

Auch hier, vielen Dank. Es ist erstaunlich, wie schnell bekam ich die Antwort. Halten Sie die große Arbeit.

War es hilfreich?

Lösung

Das erste, was Sie tun können, macht es sauberer ist mit etwas mehr Generika all diese ähnlichen Anrufe ersetzen.

(Anmerkung: assume all dies innerhalb von document.ready() ist) 

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

Mit kommagetrennte Selektoren ist eine gute Möglichkeit, DRY mit jQuery zu gehorchen.

I $(element).data() verwenden zu setzen und ein paar Daten auf dem Elemente, in diesem Fall der Selektor verwendet zu aktualisieren, um das entsprechende Element abgerufen werden.

Auch nur für eine sauberere visuellen Look, können Sie das folgende an der Stelle des $(document).ready() verwenden, wenn Sie es vorziehen. Es ist genau das gleiche, nur eine andere Syntax. 

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

Andere Tipps

ich auf eine ähnliche Frage geantwortet vor einigen Monaten jQuery Swapping Elements ob das hilft.

Matt

Clarrification, wo ich habe {id: ‚1‘} Sie in der ID des div tauschen sollten Sie einen generischen Klassennamen auf der anderen divs zeigen und machen wollen, dass sie zu verbergen

.

Denken Sie daran, dass Sie mulitple Klassen auf ein Element anwenden können: 

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

, die helfen könnten, wenn Sie Stilregeln zu den ursprünglichen divs angeschlossen haben.

Es ist gut, aber Sie werden einen allgemeineren Ansatz für die IDs müssen Sie zugewiesen haben.

Die schnellste Lösung, die den Sinn kommt, ist die überlappten divs einpacken, die unter einem übergeordneten div „#wrapped“ verblassen in. Nehmen Sie die Links, um alle und ordnen sie CSS-Klassen ‚Trigger NAME‘ wo ‚NAME‘ ist ‚Sunset,‚Winter‘, etc. Dann können Sie so etwas wie: 


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

Es ist nicht die beste Lösung, aber hofft, es gibt Ihnen eine Vorstellung.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top