jQuery πρόβλημα με το $(this)

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

jQuery πρόβλημα με το $(this)

Δημοσίευση από charavge » 11 Δεκ 2012 13:05

Καλημέρα,

Φτιάχνω για πρώτη φορά ένα πολύ απλό gallery το οποίο είδα και προσπαθώ να παραλλάξω.
Χρησιμοποίησα κάποιο έτοιμο κώδικα και τον προσάρμοσα. Το πρόβλημά μου είναι ότι δε φορτώνει σωστά το URL. Μη γνωρίζοντας λοιπόν από jQuery χρειάζομαι τα φώτα σας.

Ιδού ο κώδικας:

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="utf-8" >
</head>
<body>

<div id="gallery">
	<div id="imageHolder">
			<img id="pic1" name="pic1" src="banner-cubes.jpg">
	</div>

	<!-- Gallery Items &#40;Thumbnails&#41; -->
	<div class="galleryThumbs">
		<ul>
			<li><img src="thumbs/logo.jpg" alt="" width="50" height="50"></li>
			<li><img src="thumbs/banner-cubes.jpg" alt="" width="50" height="50"></li>
			<li><img src="thumbs/logo.jpg" alt="" width="50" height="50"></li>
			<li><img src="thumbs/banner-cubes.jpg" alt="" width="50" height="50"></li>
			<li><img src="thumbs/logo.jpg" alt="" width="50" height="50"></li>
		</ul>
	</div>
</div>

<script type="text/javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
    // Image swap on hover
    $&#40;"#gallery li img"&#41;.click&#40;function&#40;&#41;&#123;
		$&#40;'#pic1'&#41;.fadeOut&#40;'slow', function&#40;&#41; &#123;
			$&#40;'#pic1'&#41;.attr&#40;'src',$&#40;this&#41;.attr&#40;'src'&#41;.replace&#40;'thumbs/', ''&#41;&#41;;
			$&#40;'#pic1'&#41;.fadeIn&#40;'slow'&#41;;
			alert&#40;$&#40;this&#41;.attr&#40;'src'&#41;&#41;;
		&#125;&#41;;
    &#125;&#41;;
    // Image preload
    var imgSwap = &#91;&#93;;
     $&#40;"#gallery li img"&#41;.each&#40;function&#40;&#41;&#123;
        imgUrl = this.src.replace&#40;'thumbs/', ''&#41;;
        imgSwap.push&#40;imgUrl&#41;;
    &#125;&#41;;
    $&#40;imgSwap&#41;.preload&#40;&#41;;
&#125;&#41;;
$.fn.preload = function&#40;&#41; &#123;
    this.each&#40;function&#40;&#41;&#123;
        $&#40;'<img>'&#41;&#91;0&#93;.src = this;
    &#125;&#41;;
&#125;
</script>
</body>
</html>
Όπως αντιλαμβάνομαι το πρόβλημα έγκειται στο γεγονός ότι το $(this) αναφέρεται στο $pic1 και όχι στο thumb src στη συγκεκριμένη σειρά:

Κώδικας: Επιλογή όλων

$&#40;'#pic1'&#41;.attr&#40;'src',$&#40;this&#41;.attr&#40;'src'&#41;.replace&#40;'thumbs/', ''&#41;&#41;;
Θα χρειαζόμουν τη βοήθειά σας για την επίλυση.
Ευχαριστώ.

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

jQuery πρόβλημα με το $(this)

Δημοσίευση από charavge » 11 Δεκ 2012 13:32

ΟΚ. Δοκίμασα το εξής και δούλεψε:

Πρόσθεσα πριν το 2ο function:

Κώδικας: Επιλογή όλων

ImgSrcLink=$&#40;this&#41;.attr&#40;'src'&#41;.replace&#40;'thumbs/', ''&#41;;
και άλλαξα αυτό:

Κώδικας: Επιλογή όλων

$&#40;'#pic1'&#41;.attr&#40;'src',$&#40;this&#41;.attr&#40;'src'&#41;.replace&#40;'thumbs/', ''&#41;&#41;;
με αυτό:

Κώδικας: Επιλογή όλων

$&#40;'#pic1'&#41;.attr&#40;'src',ImgSrcLink&#41;;
Βασικά δεν το είχα κάνει εξαρχής καθότι πίστευα ότι οι μεταβλητές δεν περνάνε έτσι απλά μέσα στα functions και έτσι δεν έβρισκα τρόπο να περάσω τη μεταβλητή μέσα στο 2ο function. Από ότι φαίνεται το δέχεται σαν global. Δεν είναι λίγο άκυρο αυτό; Αν έχει κάποιος μια σελίδα με κάποιο καλό tutorial για jQuery functions παρακαλώ ας το στείλει.

Ευχαριστώ.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jQuery πρόβλημα με το $(this)

Δημοσίευση από alou » 11 Δεκ 2012 16:06

Νομίζω το θέμα που έχεις / είχες είναι στο $(this).

Φαντάσου ότι $(this)[0] = this, δηλαδή όταν επιλέξεις κάποιο jquery selector, σου επιστρέφεται ένα array με jquery objects και όχι ένα array με object properties.

Μια αντιστοιχεία είναι $('#ena-element)[0] και σε κανονική js document.getElementById("#ena-element")
που σου επιστρέφει το πρώτο στοιχείο.

Στην περίπτωσή σου, νομίζω χρησιμοποιώντας this ή $(this)[0] και όχι $(this) θα λειτουργούσε κανονικά και στην πρώτη μορφή.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

jQuery πρόβλημα με το $(this)

Δημοσίευση από fafos » 11 Δεκ 2012 17:34

Poios o logos pou einai toso periploko auto to script?
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

jQuery πρόβλημα με το $(this)

Δημοσίευση από charavge » 12 Δεκ 2012 01:09

fafos έγραψε:Poios o logos pou einai toso periploko auto to script?
Εννοείς ότι είναι πολύ απλό για να το κάνω θέμα ή θεωρείς ότι είναι φτιαγμένο πιο περίπλοκο από όσο πρέπει;
Εγώ καταρχάς δεν ξέρω jQuery αλλά επειδή (όπως οι περισσότεροι εδώ) μπορώ να αντιληφθώ κάποια πράγματα και επειδή η συγκεκριμένη ανάγκη μου ήταν πολύ απλοϊκή προτίμησα να το κάνω έτσι. Με ενδιαφέρει να κάνει ένα preload το image και μετά να το τοποθετεί με ένα απλό εφέ.
Το script αυτό το πήρα έτοιμο και του άλλαξα 2 γραμμές, επομένως αν έχει κάποια πράγματα παραπάνω δεν το ξέρω.
Θα μπορούσε να είναι πιο απλό κατά τη γνώμη σου; Ρίξε λίγο τα φώτα σου.

@alou
Μου κάνει λίγο παράξενο αυτό...Το κατανοώ ναι μεν, αλλά είναι λίγο παράξενο αυτό με το $(this).
Δηλαδή, εννοείς ότι αν αυτό:

Κώδικας: Επιλογή όλων

$&#40;'#pic1'&#41;.attr&#40;'src',$&#40;this&#41;.attr&#40;'src'&#41;.replace&#40;'thumbs/', ''&#41;&#41;;
το έκανα έτσι θα δούλευε:

Κώδικας: Επιλογή όλων

$&#40;'#pic1'&#41;.attr&#40;'src',$&#40;this&#41;&#91;0&#93;.attr&#40;'src'&#41;.replace&#40;'thumbs/', ''&#41;&#41;;
???
Θα το δοκιμάσω πρωί-πρωί.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

jQuery πρόβλημα με το $(this)

Δημοσίευση από fafos » 12 Δεκ 2012 02:51

Ok.. o parapano kodikas einai to preload.. giati vasika (xoris to preload) enai 2-3 grames o kodikas:

Κώδικας: Επιλογή όλων

$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
	$&#40;'.galleryThumbs li img '&#41;.click&#40;function &#40;&#41; &#123;
		var image = $&#40;this&#41;.attr&#40;'src'&#41;;
		$&#40;'#pic1'&#41;.fadeOut&#40;'slow', function &#40;&#41; &#123;
			$&#40;"#pic1"&#41;.attr&#40;'src', image&#41;.fadeIn&#40;'slow'&#41;;
		&#125;&#41;;
	&#125;&#41;;
&#125;&#41;;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jQuery πρόβλημα με το $(this)

Δημοσίευση από alou » 12 Δεκ 2012 09:18

Sorry, ξέχνα αυτό που είπα - αν και ισχύει γενικά σαν ένοια του this και $(this) - με το δεύτερο περνάς το this σαν παράμετρο στο jquery fn για να έχεις πρόσβαση στις μεθόδους του, - στην περίπτωση που αναφέρεσαι το θέμα είναι ότι:

Κώδικας: Επιλογή όλων

$&#40;"#gallery li img"&#41;.click&#40;function&#40;&#41;&#123;
     var imgsrc = $&#40;this&#41;;
 
    &#125;&#41;; 
Εδώ, περνάς το this σαν παράμετρο στο jquery function οπότε το αποτέλεσμά σου είναι ένα jquery object με τα attributes του gallery li img. Άρα $(this).attr('src') είναι το src της εικόνας που έκανες κλικ (αυτό που θες δηλαδή, αντικαθιστώντας το /thumbs).

Ενώ εδώ...

Κώδικας: Επιλογή όλων

$&#40;"#gallery li img"&#41;.click&#40;function&#40;&#41;&#123;
     
      $&#40;'#pic1'&#41;.fadeOut&#40;'slow', function&#40;&#41; &#123;
         var imgsrc = $&#40;this&#41;;
      &#125;&#41;;
    &#125;&#41;; 
... το this είναι μέσα στο scope του #pic1 οπότε λογικά, το this αναφέρεται στο element #pic1 και το $(this) στο jquery object #pic1 και κουβαλάει αυτά τα attributes. Άρα εδώ το attr('src') σου επιστρέφει το src της υπάρχουσας εικόνας στο #pic1.

Δεν υπάρχει κάτι περίεργο... global θα ήταν αν είχες πρόσβαση στη μεταβλητή (με τη συγκεκριμένη τιμή) έξω από το function

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

jQuery πρόβλημα με το $(this)

Δημοσίευση από charavge » 12 Δεκ 2012 11:55

Ευχαριστώ για την ανάλυση.

Fafos από ότι καταλαβαίνω στη jQuery υπάρχει η δυνατότητα να "κολλάς" διάφορα μαζί:
$("#pic1").attr('src', image).fadeIn('slow');
Και γλιτώνεις χρόνο και χώρο κατά μία έννοια.
alou έγραψε:Δεν υπάρχει κάτι περίεργο... global θα ήταν αν είχες πρόσβαση στη μεταβλητή (με τη συγκεκριμένη τιμή) έξω από το function
Alou παρατηρώ ότι στη jQuery μέσα μπορείς να καλείς πολλά functions με τον εξής τρόπο:
$("#gallery li img").click(function(){
$('#pic1').fadeOut('slow', function() {
$('#pic1').attr('src',$(this).attr('src').replace('thumbs/', ''));
....κλπ
Πώς περνάει η μία τιμή από το ένα function στο άλλο αν δεν είναι global (για αυτό το ανέφερα και πιο πριν); Παίζει ρόλο που είναι εμφωλευμένο το ένα function στο άλλο;

Επίσης, εφόσον θίγουμε το θέμα του $(this), πώς μπορώ μέσα από το element #pic1 να κάνω αναφορά στο parent? Όπως στη συγκεκριμένη περίπτωση που είχα εγώ και ήθελα να καλέσω το parent src τελικά.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jQuery πρόβλημα με το $(this)

Δημοσίευση από alou » 12 Δεκ 2012 13:19

charavge έγραψε:
Επίσης, εφόσον θίγουμε το θέμα του $(this), πώς μπορώ μέσα από το element #pic1 να κάνω αναφορά στο parent? Όπως στη συγκεκριμένη περίπτωση που είχα εγώ και ήθελα να καλέσω το parent src τελικά.
Αν υποθέσουμε ότι η html είναι έτσι:

Κώδικας: Επιλογή όλων

<div id="pic1">
<a id="someid" href="#">
<img id="theimage" src="some.jpg">
</a>
<a id="someid" href="#">
<img id="theimage" src="some.jpg">
</a>
</div>
Και για όποιο λόγο αποφασίσεις να κάνεις κάτι σε όλες τις εικόνες μέσα στο #pic1, θα έλεγες κάτι του τύπου:

Κώδικας: Επιλογή όλων

$&#40;'#pic1 img'&#41;.each&#40;function&#40;index&#41; &#123;
   //έχουμε ένα array με όλα τα jquery objects με αυτές τις προδιαγραφές
$&#40;this&#41;.parent&#40;&#41;. do something-> αφορά το στοιχείο <a> γονικό του image
$&#40;this&#41;.parent&#40;&#41;.parent&#40;&#41; ...  πλέον είμαστεστο div id="pic1"
&#125;&#41;
Υπάρχουν αντίστοιχες μέθοδοι για child elements στα οποία μπορείς να 'σκάψεις' και για συγκεκριμένο τύπο elemets π.χ. li, ή το πολύ χήσιμο siblings() που θα σου φέρει τα 'αδέρφια' ας πουμε ενός στοιχείου.

Και πάρα πολλά άλλα...

Για τις τιμές μεταβλητών μέσα / έξω από τα function δεν ισχύει κάτι διαφορετικό από ότι συνήθως, οι μεταβλητές δεν υπάρχουν έξω από τη function αλλά υπάρχουν σε nested functions.

Αυτό που σε μπέρδεψε είναι το this. Το this (ή $(this) ) ΔΕΝ είναι μεταβλητή, είναι keyword. Αφορά διαφορετικό object όταν είναι σε ένα function A και διαφορετικό όταν πάει σε άλλο nested Β, πχ function a { function B { } }.

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

Κώδικας: Επιλογή όλων

$&#40;"#gallery li img"&#41;.click&#40;function&#40;&#41;&#123;
var thisimage = $&#40;this&#41;;
$&#40;'#pic1'&#41;.fadeOut&#40;'slow', function&#40;&#41; &#123;
$&#40;'something'&#41;.attr&#40;'src', thisimage.attr&#40;'src'&#41;&#41; //leme twra
$&#40;'#pic1'&#41;.attr&#40;'src',$&#40;this&#41;.attr&#40;'src'&#41;.replace&#40;'thumbs/', ''&#41;&#41;; 
Ελπίζω να τα ξεμπερδεύει το παράδειγμα λίγο τα πράγματα...

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

jQuery πρόβλημα με το $(this)

Δημοσίευση από fafos » 12 Δεκ 2012 15:11

To preload pantos einai atopo kai perito opos to exeis tora... efoson dineis san mikrografies tis kyries fotografies pou tha emfanizontai sto "imageHolder" den xreiazesai preload afou to kanei h html...

pera tou oti einai kakh idea na dineis san mikrografia thn kyria fotografia "stretcharontas" thn, h enoia tou preload efarmozetai otan exoume kryfes tis kyries fotografies.. gia paradeigma an eixes thn lista sou kapos etsi:

Κώδικας: Επιλογή όλων

<li rel="images/kyria_photo.jpg"><img src="thumbs/mikrografia.jpg" alt="" width="50" height="50"></li> 
me auton ton tropo tha zhtages ta "rel" kai se auta tha ekanes to preload gia na mhn kathysterei na emfanisei thn kyria fotografia otan ekane klik sthn mikrografia..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

jQuery πρόβλημα με το $(this)

Δημοσίευση από charavge » 12 Δεκ 2012 16:39

@alou
Πολύ ωραία εξήγηση, σε ευχαριστώ! Μου είναι πιο ξεκάθαρα αρκετά πράγματα τώρα.

@fafos
Από όσο καταλαβαίνω το preloading στην ουσία γίνεται "φορτώνοντας" την εικόνα μέσα σε μία μεταβλητή (εγώ τουλάχιστον αυτό καταλαβαίνω). Το πώς και γιατί γίνεται preloading με αυτόν τον τρόπο δεν έχω καταλάβει, αλλά εφόσον έτσι λειτουργεί...
Στο script αυτό, εάν προσέξεις θα δεις ότι χρησιμοποιεί την παρακάτω γραμμή:

Κώδικας: Επιλογή όλων

imgUrl = this.src.replace&#40;'thumbs/', ''&#41;;
Με αυτόν τον τρόπο στην ουσία λέει ότι οι κανονικές φωτογραφίες βρίσκονται ένα επίπεδο επάνω από το thumbs dir. Έτσι, φορτώνει την κανονική φωτογραφία και δε φορτώνεται μέσα από τα thumbs. Ίσως, όμως, να κάνω λάθος και να μην έχω καταλάβει κάτι.

Όσον αφορά το rel, έτσι ξεκίνησα, και αν το είχα αφήσει εξαρχής έτσι θα είχα γλιτώσει πολύ χρόνο. Όλα τα γνωστά galleries δουλεύουν έτσι. Αν δούμε όμως εδώ θα προσέξουμε ότι το rel έχει άλλη χρήση. Δεν έχει και αυτό το ρόλο του; Δε θα ήταν λάθος (κατά μία έννοια) να χρησιμοποιηθεί έτσι;
Εσύ fafos πώς θα έφτιαχνες αυτό το script;

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

jQuery πρόβλημα με το $(this)

Δημοσίευση από fafos » 12 Δεκ 2012 17:15

To preload xrhsimopoieitai gia na "cacharoume" tis megales photos sto background gia na mhn exoume authn thn kathysterhsh emfanishs (delay pou elegan kai oi arxaioi).

Me liga logia, otan mpainei o xrhsths sthn selida h js arxizei kai "trexei" tis phtos pou tou exeis orisei xoris na to vlepei o xrhsths kai xoris na kathysterei shmantika to loading ths selidas.
Otan loipon trexei authn thn routina, o xrhsths einai san na exei dei autes tis photos kai tis exei krathsei sthn cache... otan kanei click sthn mikrografia h kanonikh fotografia tha tou emfanistei xoris kathysterhsh.
H methodos xrhsimopoieitai kyrios sta slideshows gia na mhn exoume to fainomeno tou leukou background mexri na fortosei thn photo h thn emfanish perigrafhs eno deixnei akoma thn prohgoumenh photo.

ego tha xrhsimopoiousa thn methodo pou anefera prohgoumenos.. den einai aparaithto na einai to attribute "rel"... tha mporouse na einai kai to "title" gia parageigma.
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

jQuery πρόβλημα με το $(this)

Δημοσίευση από alou » 12 Δεκ 2012 17:45

...ή το data-targetimg και επιλογή του με .data('targetimg')

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

(στο targetimg βάζεις ότι θες).

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

jQuery πρόβλημα με το $(this)

Δημοσίευση από charavge » 13 Δεκ 2012 01:39

Παίδες ευχαριστώ πολύ για τις λύσεις σας! Τα αναλύσατε πολύ ωραία. :clap:
Θα κάνω διάφορους πειραματισμούς και αν έχω απορίες θα επιστρέψω για... νέες λύσεις.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες