Το DOM μου μοιάζει με αυτό:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Όταν κάποιος κάνει κλικ σε μια εικόνα, θέλω το src της εικόνας να αλλάζει σε <img src="imgx_off.gif">
όπου το x
αντιπροσωπεύει τον αριθμό της εικόνας 1 ή 2.
Είναι αυτό δυνατό ή πρέπει να χρησιμοποιήσω CSS για να αλλάξω τις εικόνες;
Μπορείτε να χρησιμοποιήσετε τη συνάρτηση attr() της jQuery's. Για παράδειγμα, αν η ετικέτα img
σας έχει το χαρακτηριστικό id
'my_image', θα κάνατε το εξής:
<img id="my_image" src="first.jpg"/>
Στη συνέχεια, μπορείτε να αλλάξετε το src
της εικόνας σας με την jQuery ως εξής:
$("#my_image").attr("src","second.jpg");
Για να συνδέσετε αυτό με ένα συμβάν click
, θα μπορούσατε να γράψετε:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Για να περιστρέψετε την εικόνα, θα μπορούσατε να κάνετε το εξής:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Θα σας δείξω πώς να αλλάξετε το image src
, έτσι ώστε όταν κάνετε κλικ σε μια εικόνα να περιστρέφεται μέσα από όλες τις εικόνες που υπάρχουν στην HTML σας (στο id d1
και στην κλάση c1
συγκεκριμένα)... είτε έχετε 2 ή περισσότερες εικόνες στην HTML σας.
Θα σας δείξω επίσης πώς να καθαρίζετε τη σελίδα αφού το έγγραφο είναι έτοιμο, έτσι ώστε να εμφανίζεται αρχικά μόνο μία εικόνα.
Ο πλήρης κώδικας
$(function() {
var $images = $("#d1 > .c1 > a").clone();
var $length = $images.length;
var $imgShow = 0;
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src",
$("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
});
Η ανάλυση
Δημιουργήστε ένα αντίγραφο των συνδέσμων που περιέχουν τις εικόνες (σημείωση: θα μπορούσατε επίσης να κάνετε χρήση του χαρακτηριστικού href των συνδέσμων για πρόσθετη λειτουργικότητα... για παράδειγμα [εμφάνιση του συνδέσμου εργασίας κάτω από κάθε εικόνα][1]):
var $images = $("#d1 > .c1 > a").clone(); ,
Ελέγξτε πόσες εικόνες υπήρχαν στην HTML και δημιουργήστε μια μεταβλητή για να παρακολουθείτε ποια εικόνα εμφανίζεται:
var $length = $images.length,
var $imgShow = 0,
Τροποποιήστε την HTML του εγγράφου έτσι ώστε να εμφανίζεται μόνο η πρώτη εικόνα. Διαγράψτε όλες τις άλλες εικόνες.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ),
Δεσμεύστε μια συνάρτηση για να χειριστείτε όταν γίνεται κλικ στο σύνδεσμο της εικόνας.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ) ),
event.preventDefault(),
});
Η καρδιά του παραπάνω κώδικα είναι η χρήση του ++$imgShow % $length
για την κυκλική αναζήτηση του αντικειμένου jQuery που περιέχει τις εικόνες. Το ++$imgShow % $length
αυξάνει πρώτα τον μετρητή μας κατά ένα, και στη συνέχεια τροποποιεί αυτόν τον αριθμό με το πόσες εικόνες υπάρχουν. Αυτό θα κρατήσει τον προκύπτοντα δείκτη κυκλικά από 0
έως length-1
, που είναι οι δείκτες του αντικειμένου $images
. Αυτό σημαίνει ότι αυτός ο κώδικας θα λειτουργήσει με 2, 3, 5, 10 ή 100 εικόνες... περνώντας κυκλικά από κάθε εικόνα με τη σειρά και ξεκινώντας ξανά από την πρώτη εικόνα όταν φτάσουμε στην τελευταία.
Επιπλέον, .attr()
χρησιμοποιείται για να πάρει και να ορίσει το χαρακτηριστικό "src" των εικόνων. Για να επιλέξω στοιχεία από το αντικείμενο $images
, ορίζω το $images
ως το jQuery context χρησιμοποιώντας τη μορφή $(selector, context)
. Στη συνέχεια χρησιμοποιώ .eq()
για να επιλέξω μόνο το στοιχείο με το συγκεκριμένο δείκτη που με ενδιαφέρει.
<br/>,
Μπορείτε επίσης να αποθηκεύσετε τα src
s σε έναν πίνακα.
[jsFiddle παράδειγμα με 3 εικόνες][6]
Και εδώ's πώς να ενσωματώσετε τα hrefs από τις ετικέτες άγκυρας γύρω από τις εικόνες:
[παράδειγμα jsFiddle][7]
Μπορείτε επίσης να το κάνετε αυτό με την jQuery με αυτόν τον τρόπο:
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
Μπορείτε να έχετε μια συνθήκη εάν υπάρχουν πολλαπλές καταστάσεις για την πηγή εικόνας.