Discussion :

[designrf]

Bonjour tous le monde,

J'ai un script qui affiche des images sur toute la surface de ma page.
Celui-ci genere une liste d'images. Le premier <li> a un style display:list-item
et tous les autres ont un style display:none.

Code :

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

1
2
3
4
5
6
7
8
<div id="bgstrecher" class="bgstrecher">
      <ul>
            <li class="landscapes bgs-current" style="display:list-item"><img src="path img 1" /></li>
            <li class="landscapes" style="display:none"><img src="path img 2" /></li>
            <li class="landscapes" style="display:none"><img src="path img 3" /></li> 
            <li class="landscapes" style="display:none"><img src="path img 4" /></li> 
      <ul>
</div>

J'ai creer une autre liste similaire a la premiere. Quand je clique sur un element je recupere ca valeur (le chemin d'une image) pour pouvoir le comparer au chemin des images de ma premiere liste. Et ainsi appliquer un nouveau style sur le <li> contenant cette image pour pouvoir afficher l'image.

Code :

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

1
2
3
4
5
6
<div id="pagination">
      <a class="pagination">path img 1</a>
      <a class="pagination">path img 2</a>
      <a class="pagination">path img 3</a>
      <a class="pagination">path img 4</a>
</div>

Mon script:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$('#pagination a').live("click", function(){
  linkvalue = $(this).text();
   alert("link : " + linkvalue);
 
 $('#bgstretcher li img').each(function(index) {
 alert(index + ': ' + $(this).attr("src"));
 
                         if ($(this).attr("src") == linkvalue ) { 
       alert ("found");
  }
 });
 });

Mon probleme est que linkvalue n'a pas l'air de fonctionner.
Avez-vous une idee?

Cordialement

[Bovino]

Code :

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

linkvalue = $(this).text();

text() est censé retourné le contenu textuel de l'élément, or dans ta balise, tu as juste une balise image, il n'y a donc aucun texte...

[danielhagnoul]

Code :

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

linkvalue = $(this).text();

text() est censé retourné le contenu textuel de l'élément, or dans ta balise, tu as juste une balise image, il n'y a donc aucun texte...

Si ! il se réfère à :

Code :

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

1
2
3
4
5
6
<div id="pagination">
      <a class="pagination">path img 1</a>
      <a class="pagination">path img 2</a>
      <a class="pagination">path img 3</a>
      <a class="pagination">path img 4</a>
</div>

[designrf]

Merci pour vos reponses! J'ai resolue mon probleme.

J'utilise .text() car le text de mes balises <a> est en faite un lien absolue.
L'utilisateur ne voit pas le lien mais juste une image qui remplace ce texte en css.

Je ne connaissais pas delegate() merci pour votre conseil.


Merci a vous 2 pour le temps passez!

[SpaceFrog]

balise style d'un élément ... ?
des progrès a faire sur la terminologie ...

[kamclasse]

bonjour designrf,
normalement si vous voulez changer un style c'est à l'aide de .css()

et si votre problème est résolut merci de cliquer sur
merciiii

[danielhagnoul]

Bonjour

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
/*
 * Je vous recommande l'utilisation de delegate
 * au lieu de live qui est beaucoup moins performant.
 *
 * Une fonction each offre automatiquement deux paramètres
 * que j'ai l'habitude d'appeler i et item. Mais que l'on
 * dénomme comme l'on veut du moment que l'on s'y retrouve.
 *
 * Je vous recommande l'utilisation de la console des
 * navigateurs IE9, C10 ou F4 (Firebug) pour
 * débogué vos JS.
 *
 * Attenhtion bgstrecher et pas bgstretcher !
 */
$("#pagination").delegate("a", "click", function(){
	var linkvalue = $(this).text();
 
	console.log("link : " + linkvalue);
 
	$("#bgstrecher").find("img").each(function(i, item){
		// console.log(i, item);
 
		console.log(i + ': ' + $(item).attr("src"));
 
		if ($(item).attr("src") == linkvalue){ 
			console.log("found");
		}
	});
});