Comment transformer du Jquery a du Vanilla JS ?

Par snakeboarder, il y a 8 ans

Javascript

Bonjour la room,

J'aurais besoin d'un peu d'aide pour mon code.

Ce que je fais

Je récupére l'attribut data-note="" de l'étoile selectionnée
et placer la valeur dans le input
<input id="noteznous-note-value" type="hidden" name="noteznous-note" value="">

/* ======================================================= * HTML 5 * ======================================================= */ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./assets/css/style.css"> <title>Star</title> </head> <body> <div class="noteznous-note"> <span class="noteznous-item" data-note="1">☆</span><span class="noteznous-item" data-note="2">☆</span><span class="noteznous-item" data-note="3">☆</span><span class="noteznous-item" data-note="4">☆</span><span class="noteznous-item" data-note="5">☆</span> <input id="noteznous-note-value" type="hidden" name="noteznous-note" value=""> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="./js/star.js"></script> </body> </html> /* ======================================================= * CSS3 * ======================================================= */ .noteznous-item { color: #455A64; font-size: 40px; cursor: pointer; } .noteznous-item.active { color: gold; } // DOM ready $( document ).ready( function () { // Fonction pour récupérer la data de la note $(".noteznous-note span").on( "click", function() { var note = $( this ).attr( "data-note" ); $( "#noteznous-note-value" ).val( note ); });

Ce que je Veux

Je voudrais passer mon code en Vanilla JS

Merci pour vos réponses

10 réponses

Defy, il y a 8 ans

voila un petit guide sympa pour passer de jquery a vanilla ;-)

snakeboarder, il y a 8 ans

@Kenor,
Quelqu'un peut me dire comment faire un
$( this ).attr
avec un document.querySelectorAll()
et la node list

Defy, il y a 8 ans

ben vas voir les liens qu'on t'as donnée, tu as plein de choses qui t'explique comment faire.

snakeboarder, il y a 8 ans

Du coup j'ai fais un JS
comme ceci

// Fonction pour récupérer la data de la note var notezNousItems = document.querySelectorAll(".noteznous-note span"), valeurNote = document.getElementById("noteznous-note-value"); for(var i = 0 ; i < notezNousItems.length; i++) { notezNousItems[i].addEventListener("click", getAndSetNote); } function getAndSetNote() { var dataNote = this.getAttribute("data-note"); valeurNote.setAttribute("value", dataNote); }

Cela vous semble correcte dans le code et la syntaxe ?
Merci pour vos remposes

Kenor, il y a 8 ans

Pour la valeur d'un formulaire, il faut théoriquement utiliser le propriété "value".

Donc valeurNote.value = dataNote;

Sinon, ça me parait cohérent.

snakeboarder, il y a 8 ans

Merci @Kenor
Autre question, pense-tu que

valeurNote.setAttribute("value", dataNote);

et moins rapide ou moins correcte dans la syntaxe que ta solution ?

valeurNote.value = dataNote;

Bonne journée

Kenor, il y a 8 ans

Ce n'est juste pas pareil. Sur l'un tu changes l'attribut "value" sur l'autre, tu changes la valeur réel du formulaire.

Dans l'autre sens par exemple, getAttribute('value') va te retourner la valeur initial de ton formulaire. Si le visiteur change cette valeur et que tu veux la capturer, getAttribute ne marchera pas, il faudra forcement utiliser .value

snakeboarder, il y a 8 ans

Bonjour @Kenor

Donc le code le mieux optimiser et le plus propre serait comme celui-là ?

// Fonction pour récupérer la data de la note var notezNousItems = document.querySelectorAll(".noteznous-note span"), valeurNote = document.getElementById("noteznous-note-value"); for(var i = 0 ; i < notezNousItems.length; i++) { notezNousItems[i].addEventListener("click", getAndSetNote); } function getAndSetNote() { var dataNote = this.getAttribute("data-note"); valeurNote.value = dataNote; }

Merci beaucoup pour ton aide

Kenor, il y a 8 ans

C'est une façon de faire en tout cas.
Inutile de déclarer dataNote si tu ne fais aucun traitement dessus, autant directement l'assigné à ta value.