Comment rendre ce code plus "générique" ?

**Yann39** · 05/11/2010, 17h07

Bonjour

voici mon problème, j'ai plusieurs listes déroulantes, à côté de chacune d'elles une petite image qui permet d'ajouter la valeur sélectionnée dans la liste dans un panier.

J'aimerais que l'orsque que la valeur nulle est sélectionnée dans une liste, il ne soit pas possible de cliquer sur l'image associée pour ajouter la valeur au panier. Entre j'aimerais :
- changer le src de l'image pour mettre une image grisée
- enlever le onclick pour que l'ajout ne se fasse pas
- enlever l'effet "transfer" qui montre l'ajout au panier (cadre qui se déplace)

J'ai enlever le superflu mais en gros le code HTML ressemble à ceci (pour une liste déroulante et son image associée) :

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
<table>
 <tbody>
  <tr>
   <td>
    <div>
     <div>
      <select id="P3_FILTRE_AREA_NAME">
       <option selected="selected" value="%"> </option>
       <option value="BIDON">BIDON</option>
      </select>
     </div>
    </div>
   </td>
   <td>
    <img alt="" src="mettre_panier.png" class="img_to_panier">
   </td>
  </tr>
 </tbody>
</table>

voici le code jquery qui fonctionne pour chaque liste déroulante, ici pour la liste dont l'id est P3_FILTRE_AREA_NAME :

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
 
$("#P3_FILTRE_AREA_NAME").change(
		function () {
			if ($(this).val() == '%') {
				$(".img_to_panier:eq(0)").attr('src','#APP_IMAGES#mettre_panier_grise.png');
				$(".img_to_panier:eq(0)").unbind('click');
				$(".img_to_panier:eq(0)").unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
			}
			else {
				$(".img_to_panier:eq(0)").attr('src','#APP_IMAGES#mettre_panier.png');
				$(".img_to_panier:eq(0)").unbind('click').click(function () {
					$(this).effect("transfer", { to: $("#table_panier") }, 600);
					add_to_cart('#APP_IMAGES#', html_GetElement('P3_FILTRE_AREA_NAME').value, 'area_name', 1);
				});
				$(".img_to_panier:eq(0)").hover(mouseover,mouseout);
			}      
		}
	);

Pour la liste déroulante P3_FILTRE_ACCL_NAME :

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
 
$("#P3_FILTRE_ACCL_NAME").change(
		function () {
			if ($(this).val() == '%') {
				$(".img_to_panier:eq(1)").attr('src','#APP_IMAGES#mettre_panier_grise.png');
				$(".img_to_panier:eq(1)").unbind('click');
				$(".img_to_panier:eq(1)").unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
			}
			else {
				$(".img_to_panier:eq(1)").attr('src','#APP_IMAGES#mettre_panier.png');
				$(".img_to_panier:eq(1)").unbind('click').click(function () {
					$(this).effect("transfer", { to: $("#table_panier") }, 600);
					add_to_cart('#APP_IMAGES#', html_GetElement('P3_FILTRE_ACCL_NAME').value, 'accl_name', 1);
				});
				$(".img_to_panier:eq(1)").hover(mouseover,mouseout);
			}      
		}
	);

etc...

Comme vous le voyez le code est très similaire, il y a juste l'id de l'image qui change (eq(x)) et les paramètres de la fonction add_to_cart(). J'aimerais donc faire quelquechose de générique.

j'ai essayer avec des combinaisons de closest(), next(), nextAll(), etc... afin de faire une fonction générique qui pour chaque changement dans les listes déroulantes, récupère l'image qui suit et fait les traitement associés, mais je ne m'en sort pas j'ai laissé tombé.

Avez-vous une idée de comment je pourrais faire ça ?

Merci !

**llaffont** · 05/11/2010, 17h58

J'ai pas testé mais dans le principe sa doit ressembler à ça :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function Move2Box() {
if ($(this).val() == '%') {
$(".img_to_panier:eq(1)").attr('src','#APP_IMAGES#mettre_panier_grise.png');
$(".img_to_panier:eq(1)").unbind('click');
$(".img_to_panier:eq(1)").unbind('mouseenter',mouseover).unbind('mouseleave',mouseout);
}
else {
$(".img_to_panier:eq(1)").attr('src','#APP_IMAGES#mettre_panier.png');
$(".img_to_panier:eq(1)").unbind('click').click(function () {
$(this).effect("transfer", { to: $("#table_panier") }, 600);
add_to_cart('#APP_IMAGES#', html_GetElement(this).value, 'accl_name', 1);
});
$(".img_to_panier:eq(1)").hover(mouseover,mouseout);
}  
}
</script>
  </head>
  <body>
<table>
  <tbody>
<tr>
  <td>
<div>
  <select id="P3_FILTRE_AREA_NAME" onChange="Move2Box();">
<option value="BIDON1">BIDON1</option>
<option value="BIDON2">BIDON2</option>
  </select>
</div>
  </td>
  <td>
<img alt="" src="mettre_panier.png" class="img_to_panier" />
  </td>
</tr>
  </tbody>
</table>
  </body>
</html>

Les évènements directement gérés par ta balise select via onChange. Ce qui te permet via la variable this de donner un point de départ à ta gestion d'aspect.

**Yann39** · 06/11/2010, 23h06

Merci pour ta réponse.

Néanmoins, je me suis peut-être mal exprimé, mais ça ne résoud pas le problème, le code que tu m'a indiqué corresponbd à ce que j'utilise déjà, il fonctionne pour une seule liste déroulante, il faut que je le duplique pour chacune d'elles.

Le but est d'avoir une seule fonction jquery que j'appelerais sur chacune des listes déroulantes (pour ne pas être obligé d'écrire la fonction associée à chaque fois que j'ajoute une liste déroulante).

Merci

**llaffont** · 06/11/2010, 23h15

Envoyé par Yann39

Le but est d'avoir une seule fonction jquery que j'appellerais sur chacune des listes déroulantes

As tu seulement testé ? Voir compris.
Car ce code réponds à ton besoin à condition que tu appliques l'évènement au Select et non au gestionnaire d'évènement JQUERY

J'allais pas changé ta fonction puisqu'elle fonctionne et que tu le dis toi même.
J'ai juste modifié un ou deux truc (regarde le this) en plus de sa déclaration évènementiel.

**Yann39** · 07/11/2010, 16h40

Désolé mais je n'ai pas de quoi tester le week-end, je testerai demain au boulo.

Le simple fait d'avoir vu $(".img_to_panier:eq(1)") dans ton code m'a fait penser que ça ne fonctionnerait pas puisque je pensais que $(".img_to_panier:eq(1)") récupérait la 2ème image dans le code HTML, et non "la prochaine image" après la liste déroulante.

Mais peut-être que je me trompe. Je regarde ça demain.

Merci.

**llaffont** · 07/11/2010, 17h06

J'ai repris ton code. L'index du selecteurs: ":eq" n'est initialisé par moi mais bien par ton code.

Tu me diras demain quelles sont tes impressions.

Comment rendre ce code plus "générique" ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager