Modifier un nom de lien dans un menu avec keyup sur un input

Par Genki, il y a 10 ans

Javascript

Bonjour,

Désolé pour le titre, je savais pas trop comment expliquer ça concrètement. Donc là je peux expliquer, en gros j'ai un dropdown, un menu si on veut tel que :

<div class="drop col-xs-4"> <div class="listes col-xs-12"> <ul> <li class="page" data-fil="fa-clock-o" data-titre="Historique"> <a href="historique"><div><i class="fa fa-clock-o"></i></div><span>Historique</span></a> </li> <li class="page" data-fil="fa-user" data-titre="Les bénévoles"> <a href="les-benevoles"><div><i class="fa fa-user"></i></div><span>Les bénévoles</span></a> </li> <li class="page" data-fil="fa-file-text-o" data-titre="Les statuts"> <a href="les-statuts"><div><i class="fa fa-file-text-o"></i></div><span>Les statuts</span></a> </li> <li class="divider"></li> <li class="page" data-fil="fa-link" data-titre="Un autre lien"> <a href="un-autre-lien"><div><i class="fa fa-link"></i></div><span>Un autre lien</span></a> </li> </ul> </div> <div class="edition col-xs-12"> <table> <tbody><tr> <td class="fil"></td> <td class="titre"><input type="text"></td> </tr> </tbody></table> </div> </div>

A l'aide de jQuery, quand je clique sur un <-li->, je récupère l'icone dans <-td class="fil"-> et le titre dans l'input, code que voici :

$(".page").click(function(e) { e.preventDefault(); var that = $(this).find('span'); // On cherche le span pour après var titre = $(this).data('titre'); // On récupère le titre var fil = $(this).data('fil'); // On récupère l'icone var edition = $(this).parents(".col-xs-12").siblings(); // On switch sur la div edition edition.fadeIn().find(".titre input").val(titre); // On remplit l'input edition.find(".fil").empty().append("<i class='fa "+fil+"'></i>"); // On remplit l'icone

Ca fonctionne parfaitement. Là où je coince, c'est le code après, en effet, je veux que quand je modifie l'input, ça modifie en temps réel (pas en sauvegarde, juste en affichage), le span du titre (= that). Ca fonctionne. Cependant, quand je modifie par exemple celui du dessous, il va également modifier le premier, si je modifie un troisième, il va modifier les 3 etc..

En gros c'est comme si une variable (j'ignore laquelle), s'instanciait à chaque fois que je cliquais et que elle effectuait le changement sur toutes les <-li-> qui ont été cliqué. Or je ne veux que celle où je clique.
Le code en question :

$(".titre input").keyup(function() { // Quand une touche est pressé dans l'input that.text($(this).val()); // Modifier le span par la valeur de l'input });

Je comprends pas pourquoi il modifie toutes les <-li-> qui ont été cliqué précédemment en plus de la current.
Merci de votre aide :/

6 réponses

Maenhyr, il y a 10 ans

Bonjour,

je n'ai pas regarde tout le code en detail mais ce commentaire est incorrect.

var that = $(this).find('span'); // On cherche TOUS les span pour après
Genki, il y a 10 ans

Ca ne change rien vu qu'il n'y a qu'un span dans la sélection de toute façon, dont ça sera forcément celui là de selectionné

Maenhyr, il y a 10 ans

ok, peut tu mettre tout ton JS en un block stp ? J'ai l'impression que le probleme vient de that.

Genki, il y a 10 ans

Voilà

$(".page").click(function(e) { e.preventDefault(); var that = $(this).find('span'); var titre = $(this).data('titre'); var fil = $(this).data('fil'); var edition = $(this).parents(".col-xs-12").siblings(); edition.fadeIn().find(".titre input").val(titre); edition.find(".fil").empty().append("<i class='fa "+fil+"'></i>"); $(".titre input").keyup(function() { that.text($(this).val()); }); });
Maenhyr, il y a 10 ans

Bonjour,
voici le fonctionnement de ton code actuel :
1 ) clic sur le premier lien
a ) mise en memoire de that et autres variables
b ) ajout du listener sur keyup pour ce lien

2 ) clic sur le deuxieme lien
a ) mise en memoire de that et autres variables
b ) ajout du listener sur keyup pour ce lien

3) changement de titre
a) changement du texte dans le lien 1 (a cause de 1b)
b) changement du texte dans le lien 2 (a cause de 2b)

Voici le code corrige.

var selectedLink; $(".page").click(function(e) { e.preventDefault(); selectedLink = $(this).find('span'); var titre = $(this).data('titre'); var fil = $(this).data('fil'); var edition = $(this).parents(".col-xs-12").siblings(); edition.fadeIn().find(".titre input").val(titre); edition.find(".fil").empty().append("<i class='fa "+fil+"'></i>"); }); $(".titre input").keyup(function() { selectedLink.text($(this).val()); });
Genki, il y a 10 ans

Parfait, je comprends pas trop le raisonnement du listener etc.. C'est pour cette raison que je bloquais, mais je me doutais aussi que le that y était pour quelque chose. Et vu que je sais pas comment fonctionne le listener de Chrome et comment débugger ça..

Merci en tout cas c'est niquel ;)