jQuery - machen Alle verbergen / zeigen dieses div Bild allgemeineren

stimmen
1

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 den überlappten divs. wenn sie über einen Link schwebt, wird die zugewiesene divs Link in verblassen.

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


Vielen Dank Matt, TM und Kron, Ihre Antworten wirklich geholfen.

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

Ich wollte DRY und der Code TM half mir befolgen besten diesmal, da es nicht erforderlich für mich, meine 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ßartige Arbeit.

Veröffentlicht am 09/12/2008 um 19:39
quelle vom benutzer
In anderen Sprachen...                            


3 antworten

stimmen
6

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

(Anmerkung: nimmt all dies innerhalb von 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);
});

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

Ich verwende $(element).data()zu setzen und ein paar Daten auf das Element, in diesem Fall abzurufen, verwendet der Selektor das entsprechende Element zu aktualisieren.

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

$(function() {
   //DOM ready
};
Beantwortet am 09/12/2008 um 19:52
quelle vom benutzer

stimmen
1

Ich antwortete auf eine ähnliche Frage 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 andere divs zeigen und machen wollen, dass sie zu verstecken.

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

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

das könnte helfen, wenn Sie Stilregeln haben an den ursprünglichen divs.

Beantwortet am 09/12/2008 um 20:06
quelle vom benutzer

stimmen
0

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 verblassen in „#wrapped“. Nehmen Sie die Links, um alle und ordnen sie CSS-Klassen ‚Trigger NAME‘ wo ‚NAME‘ ist ‚Sunset,‚Winter‘, usw. Dann sind Sie so etwas wie tun können:


   $(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 hoffen, dass es Ihnen eine Idee gibt.

Beantwortet am 09/12/2008 um 20:01
quelle vom benutzer

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