Cibler des éléments proches

**Abbensa** · 09/09/2019, 16h56

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 HTML :

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
 
<!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>

Invité · 09/09/2019, 18h02

Bonjour,

Envoyé par Abbensa

...car ils ont le même id

Un id doit être UNIQUE.

Sinon, il faut utiliser des classes.

Par exemple :

Code html :

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
<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 jQuery :

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

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 jQuery :

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

$(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.

**Abbensa** · 10/09/2019, 12h01

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 HTML :

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
<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>

Invité · 10/09/2019, 12h30

Bonjour,

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

Mais je ne vais pas te réécrire le code à chaque fois.

A toi de fouiller dans la DOC jQuery.

**Abbensa** · 11/09/2019, 11h08

Bonjour,

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

Merci pour votre aide !

**NoSmoking** · 11/09/2019, 13h57

Bonjour,

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 html :

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
<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 :

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

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 :

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

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
  })
});

**Abbensa** · 11/09/2019, 17h02

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!

Cibler des éléments proches

jQuery

Discussions similaires

Partager

Partager