jQueryイベントトリガを1回だけ実行する

-1

なんらかの理由で、クリックイベントが温度要素（id：#temp）で1回発生することがあります。それが華氏に変換された後、それは摂氏に戻らない。私はjQueryを使い始めたので、どんな助けでも大歓迎です。ソースコードは以下の通りです。jQueryイベントトリガを1回だけ実行する

HTMLソース：

<html> 
    <head> 
    <link rel="stylesheet" href="main.css"/> 
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
    <script src="main.js"></script> 
    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link> 
    </head> 

    <body> 
    <h1>Local Weather Code Camp Project</h1> 
    <h4>Location</h4> 
    <p id="location"></p> 
    <h4>Weather</h4> 
    <p id="weather"></p> 
    <img id="icon"> 
    <h3 id="temp"></h3> 
    <p id="check"></p> 
    </body> 
</html>

jQueryの出典：

$(document).ready(function() { 
navigator.geolocation.getCurrentPosition(function(position) { 
    $.getJSON('https://fcc-weather-api.glitch.me/api/current?lat=' + position.coords.latitude + '&lon=' + position.coords.longitude , function(data){ 
    var tmpInt = 0; 
    $("h1").html(JSON.stringify(data)); 
    $("#location").html(data.name); 
    $("#weather").html(data.weather[0].description); 
    $("#icon").attr("src", data.weather[0].icon); 
    $("#temp").html(data.main.temp + "&#176; C"); 
    $(document).on('click','#temp',function() { 
     tmpInt = data.main.temp; 
     tmpInt = tmpInt * 1.8 +32; 
     if("#temp:contains('&#176; C')") { 
      $("#temp").html(tmpInt + "&#176; F"); 
      $("#check").html("Contains C"); 
     } 
     else if("#temp:contains('&#176; F')") { 
     $("#temp").html(data.main.temp + "&#176; C"); 
     $("#check").html("Contains F"); 
     } 
    }); 
    }); 
}); 
});

ワーキングCodePen here。

出典

2017-08-21 Michael Christian Melton

注意深く** if（ "＃temp：contains（ '° C'）"） 'で。評価していると思いますか？ – Phil

@Philのコメントに加えて。クリックイベントが発生し、関数が呼び出されています。私はあなたのCodePenの例を試しました。ちょうど単純な 'alert'を書いています。だからあなたの問題はあなたが述べたものではありません。 –

@Phil私はそれが与えられた要素にその文字列が含まれているかどうかを評価すると思うでしょうし、そうでない場合は次のifまたはexitに移動しますか？ –

のための条件が常にtrueに評価されますどのユニット（CまたはF）が表示されているのかを記憶するための変数...

var units = 'C'; 

    $("#temp").on("click", function() { 
     tmpInt = data.main.temp; 
     tmpInt = tmpInt * 1.8 + 32; 

     if (units == 'C') { 
     $("#temp").html(tmpInt + "&#176; F"); 
     units = 'F'; 
     } else if (units == 'F') { 
     $("#temp").html(data.main.temp + "&#176; C"); 
     units = 'C'; 
     } 
    });

出典

2017-08-21 03:38:08

私はOPが委任されたイベントハンドラを理由で使用したと思います。なぜあなたはそれを変えますか？ – Phil

委任されたイベントハンドラでも機能します。すべての良い。それは動作しませんか？ –

元の投稿のすべてのコードを省略すると、Philが混乱している可能性があります。上記のスニペットは、$ .getJSON –

、私はあなたが使用してまず第一に、この

if("#temp:contains('&#176; C')")

は、いずれの場合においても

if(true)

と同等です

if('any non-empty string')

約として有用であることを示唆しています気質を示す良いフラグ現在表示されているスケールです。 .data APIを使用してみてください、一時は常に別の使い方F.

に変更されるので、たとえば

$("#temp").html(data.main.temp + "&#176; C").data('unit', 'C');

とあなたのクリックハンドラで

var temp = $(this); // no need to keep looking this up by ID 
switch (temp.data('unit')) { 
    case 'F': 
    // set temp in C, etc 
    temp.data('unit', 'C') // set the unit flag 
    case 'C': 
    default: 
    // set temp in F, etc 
    temp.data('unit', 'F') // set the unit flag 
}

出典

2017-08-21 03:27:46 Phil

jQueryイベントトリガを1回だけ実行する

答えて

関連する問題