Bonjour a tous,

Pour pouvoir commencer a ecrire mes propres jQuery plugins, j'ai decide de lire le ch.11 du livre 'Learning Jquery 1.3' (p.346).

Mais je ne semble pas pouvoir comprendre exactement comment le keyword this marche avec jQuery.fn dans l'exemple suivant:

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<style>
.this{color:red}
.that{color:blue;}
.target{font-weight:bold}
 
</style>

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<div id="test">blabli</div>
<ul>
<li class="that">Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor incididunt ut labore</li>
<li>Magna aliqua</li>
<li class="that">Ut enim ad minim veniam</li>
<li>Quis nostrud exercitation ullamco</li>
<li>Laboris nisi ut aliquip ex ea commodo</li>
<li class="that">Duis aute irure dolor</li>
</ul>
<input type="button" value="Swap classes" id="swap" />

Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
    $('#swap').click(function() { 
        $('li').swapClass('this', 'that');
        return false;
    });
});
 
jQuery.fn.swapClass = function(class1, class2) {
	if (this.hasClass(class1)) {
		this.removeClass(class1).addClass(class2);
	}
	else if (this.hasClass(class2)) {
		this.removeClass(class2).addClass(class1);
	}
};

Je ne comprends par exemple pas pourquoi si un des 'li' a une classe 'class1' alors tous les elements de la liste recoivent une class2 apres le click, si il n'y a aucun element avec la class1, mais des elements avec la classe2, alors tous les 'li' recoivent une class1 (apres la click)...Bref je ne comprends pas comment le keyword this marche dans cet exemple.

Toutes suggestions/aides/explications bienvenues.
Merci.