Кнопка jQuery, требующая двух щелчков для функциональности

Я действительно новичок в работе с jQuery и JSON, но я делаю простой проект по восстановлению погоды. У меня есть это для работы, за исключением того, что мне нужно дважды нажать кнопку «Получить погоду», чтобы кнопка Fahrenheit/Celsius работала. Я уверен, что это что-то маленькое, что мне не хватает.Кнопка 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). Но я бы переместил слушателя '# change' из вашего обратного вызова' getJSON' – winhowes

У меня не было никаких ошибок, но вы правы, вытащив его из функции getJSON, он работал правильно. Благодаря! – TylerMayfield

Вы должны переместить $(document).on("click", "#change", из функции gettingJSON, в противном случае - при каждом вызове функции gettingJSON - вы атташе нового слушателя событий для click события на #change элемента.

Вот ваш обновленный код:

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! Спасибо тонне Dekel! – TylerMayfield

ответ Dekel является путь! Кроме того, если вы хотите сделать это немного красивее, вы можете скрыть кнопку изменения до тех пор, пока значения не будут доступны.

Чтобы достичь этого установить кнопку, чтобы быть скрыты загрузки страницы с помощью CSS:

#change { 
    display:none; 
}

и в вашем gettingJSON() вы можете позвонить

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

для отображения кнопки.

источник

2016-09-05 19:55:05

Приятное дополнение, получило голос от меня :-) – Dekel

thx, пользу уже возвращена :) –

Спасибо за предложение! Я сделаю это! – TylerMayfield

Кнопка jQuery, требующая двух щелчков для функциональности

ответ

Смежные вопросы