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

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

javascript jquery json

Javascript jQuery按钮需要两次单击才能实现功能,javascript,jquery,json,Javascript,Jquery,Json,我对使用jQuery和JSON非常陌生，但我正在做一个简单的天气检索实践项目。我已经让它工作了，除了我必须按两次“获取天气”按钮才能让华氏/摄氏按钮工作。我肯定我错过了一些小东西以下是所有代码： <!DOCTYPE html> <html> <head> <title>Weather</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/j

我对使用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>


天气
函数gettingJSON（数据）{
var temp=data.main.temp；
var tempC=（temp-32）*.5556；
var far=$（“.temp”）.html（“温度为”+数学地板（温度）+“F”）；
var cel=$（“.tempC”）.html（“C中的温度为”+数学地板（tempC））；
cel.hide（）；
far.show（）；
$（文档）。在（“单击”，“更改”，函数（）上）{
far.toggle（）；
cel.toggle（）；
});
}
$（文档）.ready（函数（）{
$（文档）。在（“单击”，“获取”，函数（）上）{
变量位置=$（“.loc”）.val（）；
var state=$（“.state”）.val（）；
var apiKey=“a6253b99c39a496597483fbf2ff308ff”；
变量url=”http://api.openweathermap.org/data/2.5/weather?q=“+location+”、“+state+”&units=imperial&appid=“+apiKey；
$.getJSON（url，gettingJSON）；
});
});
正文，html{
宽度：100%；
身高：100%；
背景：蜜露；
}
.temp，.tempC{
字体大小：30px；
}


天气预报
C/F

我将感谢任何可以提供的帮助

谢谢

您应该将

$（文档）移出gettingJSON
函数，否则-每次调用gettingJSON
函数时-为元素上的click
事件附加一个新的事件侦听器
以下是您的更新代码：

var far=$（“.temp”）；
var cel=$（“.tempC”）
函数gettingJSON（数据）{
var temp=data.main.temp；
var tempC=（temp-32）*.5556；
html（“温度为”+数学地板（温度）+“F”）；
html（“C中的温度是”+数学地板（tempC））；
cel.hide（）；
far.show（）；
}
$（文档）.ready（函数（）{
$（文档）。在（“单击”，“更改”，函数（）上）{
far.toggle（）；
cel.toggle（）；
});
$（文档）。在（“单击”，“获取”，函数（）上）{
变量位置=$（“.loc”）.val（）；
var state=$（“.state”）.val（）；
var apiKey=“a6253b99c39a496597483fbf2ff308ff”；
变量url=”http://api.openweathermap.org/data/2.5/weather?q=“+location+”、“+state+”&units=imperial&appid=“+apiKey；
$.getJSON（url，gettingJSON）；
});
})；
body，html{
宽度：100%；
身高：100%；
背景：蜜露；
}
.temp，.tempC{
字体大小：30px；
}



天气预报
C/F
您应该移动$（文档）。在（“click”、“#change”、
上退出gettingJSON
函数，否则-每次调用gettingJSON
函数时-您都会为单击\change
元素上的事件附加一个新的事件侦听器
以下是您的更新代码：

var far=$（“.temp”）；
var cel=$（“.tempC”）
函数gettingJSON（数据）{
var temp=data.main.temp；
var tempC=（temp-32）*.5556；
html（“温度为”+数学地板（温度）+“F”）；
html（“C中的温度是”+数学地板（tempC））；
cel.hide（）；
far.show（）；
}
$（文档）.ready（函数（）{
$（文档）。在（“单击”，“更改”，函数（）上）{
far.toggle（）；
cel.toggle（）；
});
$（文档）。在（“单击”，“获取”，函数（）上）{
变量位置=$（“.loc”）.val（）；
var state=$（“.state”）.val（）；
var apiKey=“a6253b99c39a496597483fbf2ff308ff”；
变量url=”http://api.openweathermap.org/data/2.5/weather?q=“+location+”、“+state+”&units=imperial&appid=“+apiKey；
$.getJSON（url，gettingJSON）；
});
})；
body，html{
宽度：100%；
身高：100%；
背景：蜜露；
}
.temp，.tempC{
字体大小：30px；
}



天气预报
C/F
Dekel的答案是正确的！此外，如果您想让它变得更好，可以隐藏更改按钮，直到值实际可用为止
要达到此目的，请设置通过CSS加载页面时隐藏的按钮：
#change {
   display:none;
}

然后在gettingJSON（）
中调用
$('#change').show();

用于显示按钮。
Dekel的答案是可行的！此外，如果您想让它更漂亮一点，可以隐藏更改按钮，直到值实际可用为止
要达到此目的，请设置通过CSS加载页面时隐藏的按钮：
#change {
   display:none;
}

然后在gettingJSON（）
中调用
$('#change').show();

用于显示按钮。
您的控制台中是否有任何错误？您的代码在这里似乎工作正常：（我已经删除了ajax请求）。但是我会将#change
侦听器从您的gettingJSON
回调中移出。我没有收到任何错误，但您是对的，将其从gettingJSON函数中移出使其正常工作。谢谢！您的控制台中有任何错误吗？您的代码在这里似乎工作正常：（我已经删除了ajax请求）。但是我会将#change
侦听器移出您的获取JSON
回调我没有收到任何错误，但您是对的，将其移出获取JSON函数使其正常工作。谢谢！我知道这会很容易！我真的必须了解jQuery的细节！非常感谢Dekel！我知道这会很简单简单点！我真的要学习jQuery的细节！非常感谢Dekel！谢谢你的建议！我会的！谢谢你的建议！我会的！