機能のために2回のクリックが必要なjQueryボタン

jQueryとJSONを使って作業するのは本当に新しいですが、簡単な天気検索の練習プロジェクトをやっています。 Fahrenheit/Celsiusボタンが機能するためには、Get Weatherボタンを2回押しなければならないという点を除いて、動作させる必要があります。私はそれが私が行方不明の小さなものだと確信しています。ここで機能のために2回のクリックが必要なjQueryボタン

は、すべてのコードです：

<!DOCTYPE html> 
<html> 
<head> 
<title>Weather</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> 
    function gettingJSON(data){ 


      var temp = data.main.temp; 
      var tempC = (temp - 32) * .5556; 

      var far = $(".temp").html("The temperature is " + Math.floor(temp) + "F"); 

      var cel = $(".tempC").html("The temperature in C is " + Math.floor(tempC)); 

      cel.hide(); 
      far.show(); 
      $(document).on("click", "#change", function(){ 
       far.toggle(); 
       cel.toggle(); 
      }); 

    } 

    $(document).ready(function(){ 

     $(document).on("click", "#getIt", function(){ 

      var location = $(".loc").val(); 
      var state = $(".state").val(); 
      var apiKey = "a6253b99c39a496597483fbf2ff308ff"; 
      var url = "http://api.openweathermap.org/data/2.5/weather?q="+location+","+state+"&units=imperial&appid=" + apiKey; 
      $.getJSON(url, gettingJSON); 

     }); 

    }); 



    </script> 

    <style> 
     body,html{ 
      width: 100%; 
      height: 100%; 
      background: honeydew; 
     } 
     .temp, .tempC{ 
      font-size: 30px; 
     } 
    </style> 
</head> 
<body> 
<div class="toggleMe"> 
    <p class="temp"></p> 
    <p class="tempC"></p> 
</div> 
<input type="text" class="loc" placeholder="City"> 
<input type="text" class="state" placeholder="State"> 
<button id ="getIt"> Get Weather</button> 
<button id="change">C/F</button> 

</body> 
</html>

私は可能な任意の助けをいただければと思います！

ありがとうございます！

出典

2016-09-05 TylerMayfield

コンソールに何かエラーがありますか？あなたのコードはここでうまくいくようです：https://jsfiddle.net/q3n7dsn0/（私はajaxリクエストをスタブしました）。しかし、私はあなたの 'gettingJSON'コールバックから'＃change'リスナーを移動させようとしています。 – winhowes

エラーは発生していませんでしたが、あなたは正しく、getJSON関数から移動させて正しく動作させました。ありがとう！ – TylerMayfield

あなたがそうでない場合は、gettingJSON機能のうち、$(document).on("click", "#change",を移動する必要があります - あなたはgettingJSON関数を呼び出すたびに - あなたは#change要素にclickイベントに新しいイベントリスナーをアタッシェ。

var far = $(".temp"); 
 
var cel = $(".tempC") 
 

 
function gettingJSON(data){ 
 
    var temp = data.main.temp; 
 
    var tempC = (temp - 32) * .5556; 
 
    
 
    far.html("The temperature is " + Math.floor(temp) + "F"); 
 

 
    cel.html("The temperature in C is " + Math.floor(tempC)); 
 

 
    cel.hide(); 
 
    far.show(); 
 
    
 
} 
 

 
$(document).ready(function(){ 
 

 
    $(document).on("click", "#change", function(){ 
 
    far.toggle(); 
 
    cel.toggle(); 
 
    }); 
 
    $(document).on("click", "#getIt", function(){ 
 
    var location = $(".loc").val(); 
 
    var state = $(".state").val(); 
 
    var apiKey = "a6253b99c39a496597483fbf2ff308ff"; 
 
    var url = "http://api.openweathermap.org/data/2.5/weather?q="+location+","+state+"&units=imperial&appid=" + apiKey; 
 
    $.getJSON(url, gettingJSON); 
 
    
 
    }); 
 
});

body,html{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background: honeydew; 
 
} 
 
.temp, .tempC{ 
 
    font-size: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div class="toggleMe"> 
 
    <p class="temp"></p> 
 
    <p class="tempC"></p> 
 
</div> 
 
<input type="text" class="loc" placeholder="City"> 
 
<input type="text" class="state" placeholder="State"> 
 
<button id ="getIt"> Get Weather</button> 
 
<button id="change">C/F</button>

出典

2016-09-05 19:43:59 Dekel

私はそれが何か簡単になるだろうことを知っていた！私は本当にjQueryの機能を学ばなければなりません！ありがとう、トンデッケル！ – TylerMayfield

Dekelの答えは、移動するための方法である：ここでは

は、あなたの更新されたコードです！また、値を実際に使用できるようになるまで、変更ボタンを非表示にすることもできます。

それはCSSを経由してページの読み込みによって隠されるボタン設定達するために：

#change { 
    display:none; 
}

とあなたのgettingJSON()あなたは、ボタンを表示するための

$('#change').show();

を呼び出すことができますでは。

出典

2016-09-05 19:55:05

よろしくお願いします。私から投票を受けました:-) – Dekel

thx、favs already returned： –

ありがとうございました！私はそれを行います！ – TylerMayfield

機能のために2回のクリックが必要なjQueryボタン

答えて

関連する問題