Utiliser son code plusieurs fois pour différents attributs data?

Résolu/Fermé

Florian - Modifié le 3 déc. 2019 à 18:18
Florian - 8 déc. 2019 à 18:35

Bonjour,

J'ai deux fonctions qui font exactement la même chose mais pour des attributs de données différents. Je voudrais simplifier ce code en une seule fonction et m'assurer que mon code ne se répète pas. J'ai pensé à mettre mes différents attributs de données dans un tableau, puis exécuter ma fonction sur chaque élément du tableau, mais je ne sais pas vraiment comment le faire. La fonction doit calculer des moyennes. Merci d'avance pour vos réponses. Voici le code:

HTML:

  <tr>
                <td><input type="text" value="IT"></td>
                <td><input class='tot0' type="number" value="6"></td>
                <td><input data-eleve="A" data-cours="1" class="note_m note noteE" type="number"></td>
                <td><input data-eleve="B" data-cours="1" class="note noteE" type="number"></td>
                <td><input data-cours="1" class="meCours" type="number"></td>
                <td><input class="AveragePerCourse color" type="number"></td>
            </tr>
            <tr>
                <td><input type="text" value="Français"></td>
                <td><input class='tot0 tot2' type="number" value="6"></td>
                <td><input data-eleve="A" data-cours="2" class="note_m noteE" type="number"></td>
                <td><input data-eleve="B" data-cours="2" class="noteE" type="number"></td>
                <td><input data-cours="2" class="meCours" type="number"></td>
                <td><input class="AveragePerCourse color" type="number"></td>
            </tr>
            <tr>
                <td><input type="text" value="Allemand"></td>
                <td><input class='tot0 tot3' type="number" value="8"></td>
                <td><input data-eleve="A" data-cours="3" class="note_m noteE" type="number"></td>
                <td><input data-eleve="B" data-cours="3" class="note3 noteE" type="number"></td>
                <td><input data-cours="3" class="meCours" type="number"></td>
                <td><input class="AveragePerCourse color" type="number"></td>
            </tr>
            <tr>
                <td><input type="text" value="Bio"></td>
                <td><input class='tot0 tot4' type="number" value="20"></td>
                <td><input data-eleve="A" data-cours="4" class="note_m noteE" type="number"></td>
                <td><input data-eleve="B" data-cours="4" class="note4 noteE" type="number"></td>
                <td><input data-cours="4" class="meCours" type="number"></td>
                <td><input class="AveragePerCourse color" type="number"></td>
            </tr>
            <tr>
                <td><input type="text" value="moyenne"></td>
                <td><input class="tot" type="number"></td>
                <td><input type="number" data-eleve="A" class="moyenne"></td>
                <td><input type="number" data-eleve="B" class="moyenne"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td><input class="pourcent color" type="number"></td>
                <td><input class="pourcent color" type="number"></td>
                <td></td>
            </tr>

SCRIPT / JQUERY:

$("input.moyenne[data-eleve]").each((i, eleve) => {
                let eleveIndex = $(eleve).data("eleve");
                let total = 0;

                $("input.noteE[data-eleve='" + eleveIndex + "']").each((n, note) => {
                    total += parseFloat($(note).val());
                });

                $(eleve).val(total/$('input.note_m').length);
            });
   $("input.meCours[data-cours]").each((i, cour) => {
            let courIndex = $(cour).data("cours");
            let total = 0;

            $("input.noteE[data-cours='" + courIndex + "']").each((n, note) => {
                total += parseFloat($(note).val());
            });

            $(cour).val(total/$('input.note').length);
            console.log(total)
        });

EDIT : Déplacement du sujet dans le forum JAVASCRIPT
EDIT² : Ajout des BALISES DE CODE

A voir également:

Utiliser son code plusieurs fois pour différents attributs data?
App data - Guide
Code asci - Guide
Code puk bloqué - Guide
Code telephone oublié - Guide
Code blocks free - Télécharger - Langages

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
3 déc. 2019 à 18:22

Bonjour,

Pourquoi utiliser les data-attributes dans tes selecteurs... alors que les class semblent suffire ?

Florian
3 déc. 2019 à 18:53

On m'a dit que c'était une meilleure pratique d'utiliser data-attributes.

Réponse 2 / 2

Florian
8 déc. 2019 à 18:35

Voici la soution pour les personnes que ça pourrait aider:

HTML:
<tr>
<td>Cours 1</td>
<td><input data-eleve="A" data-cours="1" /></td>
<td><input data-eleve="B" data-cours="1" /></td>
<td><input data-eleve="C" data-cours="1" /></td>
<td><span data-cours="1">0</span></td>
</tr>
<tr>
<td>Cours 2</td>
<td><input data-eleve="A" data-cours="2" /></td>
<td><input data-eleve="B" data-cours="2" /></td>
<td><input data-eleve="C" data-cours="2" /></td>
<td><span data-cours="2">0</span></td>
</tr>
<tr>
<td></td>
<td><span data-eleve="A">0</span></td>
<td><span data-eleve="B">0</span></td>
<td><span data-eleve="C">0</span></td>
</tr>

SCRIPT:

function calculateValues() {
["eleve", "cours"].forEach(x => {
$("span[data-" + x + "]").each((i, eleve) => {
let ind = $(eleve).data(x);
let total = 0;

$("input[data-" + x + "='" + ind + "']").each((n, note) => {
total += parseFloat($(note).val());
});

$(eleve).html(total);
});
})
}

$("input").change(calculateValues);

Discussions similaires

Que peut faire 3fois/j un homme, mais qu'1fois/j une femme

Alerte de siréne de mairie

Code de renvoi d'appel : Ooredo, Mobilis...

Codes bateaux et avion GTA vice city Stories

Discussions similaires

Newsletters