jQuery - κάνοντας απόκρυψη όλων / δείξτε αυτό το div εικόνα πιο γενικό

ψήφοι
1

Έχω τον παρακάτω κωδικό jQuery.

Βασικά θα έχω αρκετές επικαλύπτονται divs και μια λίστα με συνδέσμους για το δικαίωμα όλων αυτών των επικαλυπτόμενων divs. όταν αιωρείται πάνω από μια σύνδεση, αποδίδεται div του συνδέσμου θα εξασθενίσει σε.

Έχω την εξής κώδικα και λειτουργεί (χρησιμοποιεί δείγμα φωτογραφίες των προεπιλογή παράθυρα), αλλά αν κάποιος μπορεί να σκεφτεί έναν τρόπο για να βελτιστοποιήσει ή να είναι γενική, εγώ θα το εκτιμούσα.

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


Εμφάνιση Ηλιοβασίλεμα Εμφάνιση Χειμώνας Εμφάνιση Blue Hills Εμφάνιση νούφαρα


Σας ευχαριστώ Matt, TM και Kron, οι απαντήσεις σας βοήθησε πραγματικά.

Ι dont αισθάνομαι τον εαυτό μου εξήγησε εντελώς, αλλά TM προϋπόθεση ότι η απάντηση που έψαχνα.

Ήθελα να ακολουθήσει στεγνό και ο κωδικός TM παρέχεται με βοήθησε καλύτερα αυτή τη φορά, δεδομένου ότι δεν απαιτείται για μένα να αλλάξει σήμανσης μου, απλά τον κωδικό jQuery.

Και πάλι, ευχαριστώ πολύ. Η κατάπληξή του πόσο γρήγορα πήρα την απάντηση. Συνεχίστε την καλή δουλειά.

Δημοσιεύθηκε 09/12/2008 στις 19:39
πηγή χρήστη
Σε άλλες γλώσσες...                            


3 απαντήσεις

ψήφοι
6

Το πρώτο πράγμα που μπορείτε να κάνετε, για να γίνει καθαρότερο είναι να αντικαταστήσει όλες αυτές τις παρόμοιες κλήσεις με κάτι πιο γενικό.

(σημείωση: ας υποθέσουμε ότι όλα αυτά είναι μέσα 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);
});

Χρησιμοποιώντας οριοθετημένο με κόμματα επιλογείς είναι ένας πολύ καλός τρόπος για να υπακούσει DRY με jQuery.

Μπορώ να χρησιμοποιήσω $(element).data()για να ρυθμίσετε και να ανακτήσει μια κάποια δεδομένα σχετικά με το στοιχείο, στην περίπτωση αυτή, ο επιλογέας χρησιμοποιείται για την ενημέρωση του κατάλληλου στοιχείου.

Επίσης, μόνο για ένα καθαρότερο οπτική ματιά, μπορείτε να χρησιμοποιήσετε την ακόλουθη στη θέση του $(document).ready(), αν το προτιμάτε. Είναι ακριβώς το ίδιο πράγμα, απλά μια διαφορετική σύνταξη.

$(function() {
   //DOM ready
};
Απαντήθηκε 09/12/2008 στις 19:52
πηγή χρήστη

ψήφοι
1

Απάντησα σε μια παρόμοια ερώτηση πριν από μερικούς μήνες jQuery Ανταλλαγές Στοιχεία αν αυτό βοηθάει.

Ματ

Clarrification, όπου έχω {id: «1»} θα πρέπει να ανταλλάξουν το id του div που θέλετε να εμφανίσετε και να κάνει μια γενική ονομασία της κατηγορίας από την άλλη DIV για να τους κρύψουν.

Να θυμάστε ότι μπορείτε να εφαρμόσετε mulitple τάξεις σε ένα στοιχείο:

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

η οποία θα μπορούσε να βοηθήσει αν έχετε κανόνες στυλ που συνδέονται με τις αρχικές divs.

Απαντήθηκε 09/12/2008 στις 20:06
πηγή χρήστη

ψήφοι
0

Είναι καλό, αλλά θα χρειαστεί μια πιο γενική προσέγγιση για τις id του έχετε ορίσει.

Η ταχύτερη λύση που έρχεται στο μυαλό είναι να ολοκληρώσει τις επικαλυπτόμενες divs που σβήνουν σε λιγότερο από ένα γονέα div «#wrapped». Πάρτε όλες τις συνδέσεις και να τους εκχωρήσετε κατηγορίες CSS «σκανδάλη ΟΝΟΜΑ», όπου «ΟΝΟΜΑ» είναι «Sunset,“Χειμώνας”, κ.λπ. Στη συνέχεια, μπορείτε να κάνετε κάτι σαν:


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

Δεν είναι η καλύτερη δυνατή λύση, αλλά ελπίζω ότι σας δίνει μια ιδέα.

Απαντήθηκε 09/12/2008 στις 20:01
πηγή χρήστη

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