Cibler des éléments proches

Version imprimable

Bonjour,

Je suis débutant en js et je rencontre un soucis, en effet j'essaye de faire apparaître le résultat d'un calcul au choix de l'option du select. c'est ok pour le premier select mais au deuxième ça ne fonctionne pas car ils ont le même id mais je ne vois pas comment rendre cela dynamique sans rentrer dans une fonction hyper complexe. Avez-vous des suggestion pour m'aider svp?

voici le code:

Code:

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
 
<!DOCTYPE html>
<html>
<head>
 
</head>
 
<body>
 
  <select name="amountReturnedOption" id="amountReturned">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <span id="price">50<br><br></span>
	<span id="txtHint" style="vertical-align: center"></span><br>
 
      <select name="amountReturnedOption" id="amountReturned">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <span id="price">50<br><br></span>
	<span id="txtHint" style="vertical-align: center"></span><br>
 
 
 
</body>
 
</html>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
 
$("#amountReturned").change(function(){
 var selectedcolor = $('#amountReturned option:selected').val(); 
 var price = $('#price').text(); 
 var cal = selectedcolor * price;
 document.getElementById("txtHint").innerHTML = cal;
});
 
});
</script>

Bonjour,

Citation:

Envoyé par Abbensa

...car ils ont le même id

Un id doit être UNIQUE.

Sinon, il faut utiliser des classes.

Par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p>
    <select name="amountReturnedOption" class="amountReturned">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    * <span class="price">50</span>
    = <span class="txtHint" style="vertical-align: center"></span>
</p>
<p>
    <select name="amountReturnedOption" class="amountReturned">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    * <span class="price">50</span>
    = <span class="txtHint" style="vertical-align: center"></span>
</p>

Code:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
 
  $(".amountReturned").on('change', function(){
    var selectedcolor = $(this).val(); // $(this) = l'élément affecté par l'évènement (ici, le select "changé")
    var price = $(this).next('.price').text(); // on cible l'élément de classe '.price' SUIVANT le <select>
    var cal = selectedcolor * price;
    $(this).next('.price').next(".txtHint").text(cal); // on cible l'élément de classe '.txtHint' SUIVANT l'élément de classe '.price' SUIVANT le <select>
  });
 
});

Code:

$(this)

représente l'élément sur lequel l'évènement s'est produit.

Voir : .next()

Pour info :

la syntaxe utilisée ici est celle de la librairie jQuery.
la syntaxe du "JavaScript pur" (ou "JS Vanilla") est différente.

jQuery a l'avantage (entre autres) de simplifier grandement la syntaxe.

Bonjour,

Merci pour votre aide!

J'ai pu tester cela et je constate que la méthode next() ne fonctionnera que si on met tous les éléments (select, span class price et txtHint) dans le même bloc p.
Mais si un élément est sorti de celui-ci, ou si les éléments sont disposés autrement, on a une valeur vide.

le next() permettra une utilisation uniquement spécifique ou cela est possible de l'adapter à mon exemple ? je n'arrive pas à voir cela

comme par exemple en utilisant un tableau:

Code:

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
<table>
  <tr>
    <td>
       <select name="amountReturnedOption" class="amountReturned">
           <option value="0">0</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
       </select>
   </td>
   <td>
          * <span class="price">50</span>
   </td>
   <td>
         = <span class="txtHint" style="vertical-align: center"></span>
   </td>
  </tr>
<tr>
    <td>
       <select name="amountReturnedOption" class="amountReturned">
           <option value="0">0</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
       </select>
   </td>
   <td>
          * <span class="price">50</span>
   </td>
   <td>
         = <span class="txtHint" style="vertical-align: center"></span>
   </td>
  </tr>
</table>

10/09/2019, 12h30
Invité

Bonjour,

On peut remonter dans le <td> avec .parent().

Mais je ne vais pas te réécrire le code à chaque fois. :recherch:
A toi de fouiller dans la DOC jQuery.
11/09/2019, 11h08
Abbensa

Bonjour,

En effet j'ai pu remonter à la balise souhaitée avec les fonctions parent() et children().

Merci pour votre aide !

Bonjour,

Citation:

J'ai pu tester cela et je constate que la méthode next() ne fonctionnera que si on met tous les éléments (select, span class price et txtHint) dans le même bloc p.
Mais si un élément est sorti de celui-ci, ou si les éléments sont disposés autrement, on a une valeur vide.

Pour palier à cela il existe une méthode jQuery méconnue, index(), qui associée à la méthode eq() peut s'avérer très utile lorsque l'on cherche à cibler des pairs, ou plus, d'éléments.

Exemple de structures HTML différentes

Code:

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
<section id="groupe">
  <p>
    <label class="label">label #1</label>
    <input class="saisie" value="label #1">
  </p>
  <p>
    <label class="label">label #2</label>
    <input class="saisie" value="label #2">
  </p>
  <p>
    <label class="label">label #3</label>
    <input class="saisie" value="label #3">
  </p>
  <p>
    <label class="label">label #4</label>
    <input class="saisie" value="label #4">
  </p>
  <table>
    <tr>
      <td><label class="label">label #5</label></td>
      <td><input class="saisie" value="label #5"></td>
    </tr>
    <tr>
      <td><label class="label">label #6</label></td>
      <td><input class="saisie" value="label #6"></td>
    </tr>
    <tr>
      <td><label class="label">label #7</label></td>
      <td><input class="saisie" value="label #7"></td>
    </tr>
    <tr>
      <td><label class="label">label #8</label></td>
      <td><input class="saisie" value="label #8"></td>
    </tr>
  </table>
</section>

une seule et même fonction fait le job dans les deux cas de construction.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// récup. collection des éléments ciblés
const $elements = $(".label, .saisie");
// affectation événements
$(".label").on("mouseenter mouseleave", function(event) {
  // récup. position élément dans collection
  const index = $elements.index(this);
  // récup. position du suivant dans collection
  const $next = $elements.eq(index + 1);
  // définition couleur à appliquer
  const couleur = "mouseenter" === event.type ? "#F00" : "inherit";
  // application de la couleur
  $next.css({
    color: couleur
  })
});

Dans la mesure où la liste peut être dynamique, création à la volée d'éléments, on peut passer, suivant le même principe, par de la délégation.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// affectation événements par délégation
$("#groupe").on("mouseenter mouseleave", ".label", function(event) {
  // récup. collection, potentiellement dynamique, des éléments ciblés
  const $elements = $("#groupe .label, #groupe .saisie");
  // récup. position élément dans collection
  const index = $elements.index(this);
  // récup. position du suivant dans collection
  const $next = $elements.eq(index + 1);
  // définition couleur à appliquer
  const couleur = "mouseenter" === event.type ? "#F00" : "inherit";
  // application de la couleur
  $next.css({
    color: couleur
  })
});

11/09/2019, 17h02
Abbensa

Bonjour,

Merci pour votre retour!
En effet cette logique de code est optimale et me permet d'éviter les répétitions d'appels à la fonction next et parent.

Merci pour l'aide!