Discussion :

[ApkarLeTsar]

Bonjour à tous, je n'arrive pas à résoudre un problème et je demande donc de l'aide de la part de communauté.

Voici mon problème je cherche à cliquer sur des liens ayant comme id=".A-playlist-i" avec i variant de 1 à n qui m'affiche le contenu associé à cette playlist qui a pour id="S-section-i" (A car cela est contenu dans un aside et S car c'est contenu dans une section).

Dans un premier temps j'ai donc créer une liste Li qui parcourt mon "aside" et ma "section" et qui me donne toutes les playlists existantes.

Dans un second temps j'utilise l'évenement clique; quand je clique sur n'importe quelle playlist je veux qu'il affiche le contenu correspondant dans la section. Par exemple si je clique sur playlist 1 (id="A-section-2") il cache toutes les playlists "S-section-k" avec k=!i et m'affiche uniquement "S-section-2" (cad k==i).

Cependant lorsque le programme s’exécute et que je clique sur un lien, il parcourt toute la boucle for (k variant de 1 à n) sans executer le script. du coup k=n+1 et le contenu de la section est logiquement inchangé.

Comment puis je faire pour que la fonction s'éxécute dans la boucle?

Merci infiniment de votre coopération!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
<script>
 
    var Li=function(){
        var size=document.querySelectorAll('aside .A-playlist').length;
 
 
        var L=new Array();
        var M=new Array();
        for (var i = 0; i < size; i++) {
             var A_nom_playlist=document.querySelectorAll('aside .A-playlist')[i].id;
             var S_nom_playlist=document.querySelectorAll('section .S-playlist')[i].id;
             L=L.concat('#'+A_nom_playlist);
             M=M.concat('#'+S_nom_playlist);
 
 
        };
        return([L,M]);
 
    };
 
 
    var L=Li()[0];
    var M=Li()[1];
 
        var taille=L.length;
    for(var j=0;j<taille;j++){
        $(L[j]).click(function(){
            for(var k=0;k<taille;k++){
                if(k==j){
                    $(M[k]).show();
 
                }
                else{
                    $(M[k]).hide();
                }
 
            }
 
 
 
        });
    }
 
 
 
 
 
</script>

[Loralina]

Bonjour,
Par rapport à l'identifiant ".A-playlist-i", je pense qu'il faudrait échapper le point au niveau du "querySelectorAll" ou alors ne pas mettre de point.
Peut-être un début de solution, si on laisse le point :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<aside>
	<a id=".A-playlist-1"></a>
	<a id=".A-playlist-2"></a>
	<a id=".A-playlist-3"></a>
</aside>
<script>
var size=document.querySelectorAll("aside [id^=\\.A-playlist]").length;
</script>

[ApkarLeTsar]

bonjour Loralina,

je ne comprends pas trop ce que tu cherches à me dire. J'ai oublié de préciser que toutes les playlist de l'aside (id=A-playlist-i) font partis du même classe (A-playlist) et il est en de même pour le contenu correspondant dans la section ( id=S-section-i appartenant tous à la classe S-playlist). Du coup je n'ai aucun problème dans ma 1ere boucle et j'obtiens bien L=['#S-playlist-1','#S-playlist-2','#S-playlist-3'] et M=['#A-playlist-1','#A-playlist-2','#A-playlist-3'].
Mon problème réside dans la seconde boucle.
Est ce plus clair pour vous?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<aside class="aside">
 
			<!-- PLAYLIST -->
			<div class='A-playlist' id='A-playlist-1'><a href="#">Playlist 1</a></div>
			<div class='A-playlist' id='A-playlist-2'><a href="#">Playlist 2</a></div>
			<div class='A-playlist' id='A-playlist-3'><a href="#">Playlist 3</a></div>
 
		</aside>
 
<section class="section">
 
			<div class='S-playlist' id='S-playlist-1'>
				<div class='col-12'><img src="images/computer-640.jpg" class="images"></div>
			</div>
 
 
			<div class='S-playlist' id='S-playlist-2'>
				<div class='col-4'><img src="images/bokeh-640.jpg" class="images"></div>
				<div class='col-4'><img src="images/berlin-640.jpg" class="images"></div>
				<div class='col-4'><img src="images/blur-640.jpg" class="images"></div>
				<div class='col-4'><img src="images/bokeh-640.jpg" class="images"></div>
			</div>
 
			<div class='S-playlist' id="S-playlist-3">
				<div class='col-6'><img src="images/analytics-640.jpg" class="images"></div>
				<div class='col-6'><img src="images/apple-640.jpg" class="images"></div>
			</div>
 
		</section>
 
 
	</body>
 
<script>
 
	var Li=function(){
		var size=document.querySelectorAll('aside .A-playlist').length;
 
		var L=new Array();
		var M=new Array();
		for (var i = 0; i < size; i++) {
			 var A_nom_playlist=document.querySelectorAll('aside .A-playlist')[i].id;
			 var S_nom_playlist=document.querySelectorAll('section .S-playlist')[i].id;
			 L=L.concat('#'+A_nom_playlist);
			 M=M.concat('#'+S_nom_playlist);
 
 
		};
		return([L,M]);
 
 
	};
 
	var L=Li()[0];
	var M=Li()[1];
 
var taille=L.length;
	for(var j=0;j<taille;j++){
		$(L[j]).click(function(){
 
 
			for(var k=0;k<taille;k++){
				if(k==j-1){
					$(M[k]).show();
 
				}
				else{
					$(M[k]).hide();
				}
 
			}
 
 
 
		});
	}
</script>

[Loralina]

Merci pour ces précisions.

En fait, vous aviez écrit :

des liens ayant comme id=".A-playlist-i" avec i variant de 1 à n

Je pensais que vous aviez des liens comme dans le code que je proposais et que vous utilisiez "querySelectorAll" sur les "id".

Maintenant, je comprends mieux.

Le problème ne serait-il pas ici dans la fonction de clic :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(k==j-1){

La variable "j" est externe à la fonction.
De ce fait, quel que soit l'objet cliqué, "j" aura la même valeur pour tous, c'est à dire celle de la variable "taille", qui est la valeur à la sortie de la boucle.
C'est un problème très classique.
Pour éviter cela, vous pourriez définir sur chaque objet une propriété "j" contenant la valeur de la variable "j" et utiliser "this.j" dans la fonction.

Je n'utilise pas jquery, mais à première vue, cela donnerait quelque chose de ce genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
for(var j=0;j<taille;j++){
	$(L[j])[0].j=j;
	$(L[j]).click(function(){
		for(var k=0;k<taille;k++){
			if(k==this.j){
				$(M[k]).show();
			}
			else{
				$(M[k]).hide();
			}
		}
	});

Je n'ai pas remis le "-1" dans la comparaison ("k==this.j" et non "k==this.j-1"), à voir s'il est nécessaire.

A noter que dans votre code, il y a de nombreuses choses à optimiser, par exemple en exécutant une seule fois la fonction "Li" comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var ar=Li();
var L=ar[0];
var M=ar[1];

[ApkarLeTsar]

Cela marche parfaitement, merci de votre contribution!
Je pensais bien que la réponse était avec le this

Cependant j'ai une petite question, j'ai du mal à comprendre la ligne de code suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$(L[j])[0].j=j;

Pouvez vous juste me détailler cette ligne?

[Loralina]

Oui, mais n'utilisant pas jquery, ma réponse sera approximative :

En faisant "$(L[j]).click(...)", jquery doit créer, sur un objet, une fonction du style "onclick", ou, plus probablement, associe une fonction à un événement de clic avec "addEventListener", ce qui revient presque au même.
L'objet attaché à cet événement n'est pas directement "$(L[j])", mais "$(L[j])[0]" ("$(L[j])" étant comme un array).
Le "this" se réfère à l'objet sur lequel est appelée la fonction de clic, ici un objet "div" sur lequel on a défini une propriété "j".

On aurait aussi pu écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var objet=$(L[j])[0];
objet.j=j;
objet.onclick=function(){...};

D'une manière générale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var objet={prop:123,test:function(){alert(this.prop);}};
objet.test(); //affiche 123

[ApkarLeTsar]

Très bien, merci beaucoup!
Bonne soirée