J'ai mis en place un if | sinon si script pour changer la température affichée sur mon projet de Celcius à Ferinheit, et ça marche. Lorsque je clique sur le «C», il effectue la conversion des nombres et ajoute «F» à la fin. Cependant, maintenant, lorsque je clique sur le "F", il ne revient pas en arrière et je ne peux pas comprendre pourquoi. J'ai essayé de déclarer les variables en dehors de la fonction au cas où elles seraient écrasées d'une manière ou d'une autre, mais cela n'a pas fonctionné non plus. Voici le code JS (au moins la pièce qui est pertinente pour le problème):

        num = Math.round(parseInt(arr.main.temp));
        var temp = num+String.fromCharCode(176)+`<span class=\"temp\" id='ctof'>${tempValue}</span>`; 
        $("#temperature").html(temp)
        $('#ctof').click(function () {
          var currentTempUnit = tempValue;
          var newTempUnit = currentTempUnit == "C" ? "F" : "C";
          console.log(newTempUnit);
          tempValue = newTempUnit;
          if (newTempUnit == "F") {
            num = Math.round(parseInt(arr.main.temp * (9/5) + 32));
            var fahTemp = num+String.fromCharCode(176)+`<span class=\"temp\" id='ctof'>${tempValue}</span>`;
            $("#temperature").html(fahTemp)
          } else {
            $("#temperature").text(temp);
          }

Pour le code complet et CSS, etc. Le codepen est ici: https: // codepen.io/chase-hippen/pen/WzqBvj?editors=0011

0
Cdhippen 16 avril 2018 à 07:04

4 réponses

Meilleure réponse

Lorsque vous procédez ainsi:

$('#ctof').click(function ()...

Vous attachez cette fonction de clic à l'élément DOM actuellement existant qui a un identifiant de ctof. Lorsque vous créez un nouveau nœud avec le même identifiant plus tard, il ne récupère pas automatiquement ce même écouteur d'événements.

Séparez la fonction afin de pouvoir l'ajouter à plusieurs endroits et assurez-vous que lorsque vous créez le nouveau nœud, vous ajoutez à nouveau l'écouteur.

Voici une version modifiée de votre code: https://codepen.io/anon/pen/ OvKVNX? Editors = 0011

1
kshetline 16 avril 2018 à 04:33

L'élément avec l'ID #ctof est dynamique. Chaque fois que vous l'insérez dans #temperature, les événements (click) que vous y avez attachés disparaîtront.

1
Dong Nguyen 16 avril 2018 à 04:18

Si #ctof est généré dynamiquement, vous devrez attacher le gestionnaire de clics au niveau du document. Par exemple:

$(document).on("click", "#ctof", function() {
    // do your work here
});
0
Blake Shadle 16 avril 2018 à 04:24

Lorsque j'ajoute un div avec l'ID "ctof" et que je clique dessus, cela fonctionne très bien.

<div id="ctof">click me to change temp</div>

Je pense que votre js va bien.

0
AWP 16 avril 2018 à 04:29