Comment rendre ce code plus "générique" ?
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:
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:
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:
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 !
