Question

我真的很喜欢使用jQuery和JSON，但我正在做一个简单的天气检索练习项目。除非我必须按两次“获取天气”按钮才能使华氏度/摄氏度按钮工作，我才能使用它。我确信这是我失踪的小事。

以下是所有代码：

<!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>

我很感激任何帮助！

谢谢！

Answer 1

您应该将$(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>

Answer 2

Dekel的答案是要走的路！另外，如果你想让它更好一点，你可以隐藏更改按钮，直到值实际可用。

要达到该目的，请通过CSS加载页面来隐藏按钮：

#change {
   display:none;
}

然后在您的gettingJSON()中，您可以致电

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

用于显示按钮。

jQuery按钮需要两次单击才能实现功能

2 个答案: