- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在创建一个本地天气应用程序,我创建了一个下拉菜单,您可以在其中单击一个位置,然后会显示城市、国家/地区和温度等信息。但是,我无法在每次单击某个位置时都显示该信息。
这是我的代码。
如您所见,我能够加载当前位置和温度。我所做的是列出全局变量并在 function getLocation()
中调用它们并在 function getWeather()
中运行信息。对于下拉菜单,我制作了一个名为 mainCities
的数组,并将城市附加到 function testMenu()
中的下拉菜单。在此函数中,我添加了 onclick=testWeather('place')
。对于这个,我创建了另一个名为 function testWeather(cityLocation)
的函数,我在其中再次列出了全局变量的信息,并尝试在 function getWeather()
中再次运行它,但它是不工作。我错过了什么?
您可以在以下位置查看我的代码:http://codepen.io/kikibres/pen/EZMJZw
$(document).ready(function() {
var currentLat;
var currentLong;
var currentCity;
var currentRegion;
var currentCountry;
var mainCities = {
'San_Francisco': {
'region': 'California',
'country': "United States",
'lat': 37.7749300,
'lon': -122.4194200
},
'St._Louis': {
'region': 'Missouri',
'country': "United States",
'lat': 38.6272700,
'lon': -90.1978900
},
'Miami': {
'region': 'Florida',
'country': "United States",
'lat': 25.7742700,
'lon': -80.1936600
},
'Tokyo': {
'region': 'Tokyo',
'country': "Japan",
'lat': 35.689500,
'lon': 139.6917100
}
};
function testMenu() {
for (var place in mainCities) {
var city = place.replace(/_/g, ' ');
$('#testMenu').append("<li onclick=testWeather('" + place + "');><a href='#'>" + city + "</a></li>");
}
};
function testWeather(cityLocation) {
currentLat = testLocation[cityLocation].lat;
currentLong = testLocation[cityLocation].lon;
currentRegion = testLocation[cityLocation].region;
currentCity = testLocation[cityLocation];
currentCountry = testLocation[cityLocation].country;
getWeather();
};
function getLocation() {
$.getJSON('http://ip-api.com/json/?callback=?', function(data) {
currentRegion = data.regionName;
currentCity = data.city;
currentCountry = data.country;
currentLat = data.lat;
currentLong = data.lon;
//$("#cityname").text(currentCity);
getWeather();
});
};
function getWeather() {
$("#cityname").text(currentCity);
$("#state").text(currentRegion);
$("#country").text(currentCountry);
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function(json) {
var showfahrenheit = true;
var tempfahrenheit = Math.round(json.main.temp);
var temcelcius = Math.round((tempfahrenheit - 32) * 5/9);
$("#temp").html(tempfahrenheit);
$('#unit-switch').on('click', function() {
if (showfahrenheit === false) {
$("#temp").html(tempfahrenheit);
showfahrenheit = true;
} else {
$("#temp").html(temcelcius);
showfahrenheit = false;
}
$("#unit-toggle").toggleClass("toggle");
//$('#temp').toggleClass('toggle');
});
});
};
$(".cityarea").html(getLocation);
testMenu();
});
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
body {
position: relative;
}
html,body{
height:100%;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
.container {
position: relative;
display: block;
margin: 0 auto;
width: 60%;
}
.header h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
}
.weatherbox {
text-align: center;
}
.cityarea h2 {
color: #000000;
font-family: 'Roboto', sans-serif;
font-weight: normal;
font-size: 2em;
margin: 0;
}
.countryarea {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
margin: 0 auto;
}
.countryarea h3 {
margin: 0 0 10px 0;
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
.countryarea h3:first-child {
margin-right: 8px;
}
.dropdown {
position: relative;
display: inline-block;
font-size: 16px;
color: #FFF;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: nowrap;
text-transform: uppercase;
}
input[type=checkbox]{
display: none;
}
label{
box-sizing: border-box;
display: inline-block;
width: 100%;
background-color: #57A0D4;
padding: 10px 20px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 5px;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label .fa-globe {
margin-right: 10px;
}
/* The ul will have display:none by default */
ul{
position: absolute;
list-style: none;
text-align: left;
width: 100%;
min-width: 160px;
z-index: 1;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
display: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
ul li{
/*padding: 15px;*/
background-color: #fff;
color: #4FB9A7;
margin-bottom: 1px;
cursor: pointer;
}
ul li a {
padding: 8px 20px;
color: inherit;
text-decoration: none;
display: block;
}
ul li a:hover{
background-color: #4FB9A7;
color: #FFF;
}
input[type=checkbox]:checked ~ label {
background-color: #3D88BD;
}
input[type=checkbox]:checked ~ ul {
display: block;
}
ul .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.temperaturearea span#temp {
position: relative;
color: #000000;
font-size: 80px;
}
.temperaturearea #temp:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
top: 16px;
right: -17px;
border: 3px solid #000000;
border-radius: 50%;
}
.weather > span {
position: relative;
font-size: 1.2rem;
}
.weather > span:before {
content: '';
position: absolute;
left: -10px;
top: 0px;
height: 3px;
width: 3px;
border: 2px solid #000;
border-radius: 50%;
}
.main-toggle span {
margin: 0 0 0 16px;
}
.main-toggle span:last-child {
margin-left: 11px;
}
.weather button {
background: #6bbf6b;
border: none;
border-radius: 30px;
outline: none;
width: 45px;
height: 20px;
margin: 5px 5px 0;
cursor: pointer;
position: relative;
transition: background .2s;
}
.weather button:active {
background: #67b567;
}
.weather #unit-toggle {
position: absolute;
display: inline-block;
left: -8px;
top: 2px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
transition: left .2s;
}
#unit-toggle.toggle {
left: 16px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="header"><h1>Local Weather</h1></div>
<div class="weatherbox">
<div class="cityarea">
<h2 id="cityname"></h2>
</div>
<div class="countryarea">
<h3 id="state"></h3>
<h3 id="country"></h3>
</div>
<div class="dropdownlocation">
<div class="dropdown">
<input type="checkbox" id="checkbox-toggle">
<label for="checkbox-toggle"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></label>
<ul id="testMenu">
<li><a href="#">Current Location</a></li>
<li class="divider"></li>
<li class="dropdown-header">Main Cities</li>
</ul>
</div>
</div>
<div class="temperaturearea">
<div>
<span id="wicon"></span>
</div>
<div id="wdescription"></div>
<span id="temp"></span>
<div class="weather main-toggle"> <!-- Begin Unit Switch -->
<span>F</span>
<button id="unit-switch"><span id="unit-toggle"></span></button>
<span>C</span>
</div>
</div>
</div>
</div>
</div>
最佳答案
代码有几个问题,因为您已经在 document.ready
中定义了所有函数和变量,您无法在 document.ready 之外访问任何这些函数和变量
。这就是为什么当您在 onclick li 上调用“testWeather
”时,它会抛出“testWeather
”未定义的原因。要解决这个问题(您应该使变量和函数成为全局变量),您应该在 document.ready
之外定义所有变量。只需在 document.ready 中保留以下两行代码即可。$(".cityarea").html(getLocation);
testMenu();
但这只会解决 'testWeather
' is not defined 问题,并且您的代码中还有更多问题,在 testWeather
函数中,您正在使用一个属性称为 testLocation
,它未定义,因此您会在此处遇到 JavaScript 错误。您已将测试位置保存在 mainCities
变量中,因此您应该使用 mainCities
而不是 testLocation
。这两项更改将使您的应用程序正常运行。这是更正后的 JavaScript 代码。您的代码还有一个小错误,您读取当前城市的方式不正确。
$(document).ready(function () {
$(".cityarea").html(getLocation);
testMenu();
});
var currentLat;
var currentLong;
var currentCity;
var currentRegion;
var currentCountry;
var mainCities = {
'San_Francisco': {
'region': 'California',
'country': "United States",
'lat': 37.7749300,
'lon': -122.4194200
},
'St._Louis': {
'region': 'Missouri',
'country': "United States",
'lat': 38.6272700,
'lon': -90.1978900
},
'Miami': {
'region': 'Florida',
'country': "United States",
'lat': 25.7742700,
'lon': -80.1936600
},
'Tokyo': {
'region': 'Tokyo',
'country': "Japan",
'lat': 35.689500,
'lon': 139.6917100
}
};
function testMenu() {
for (var place in mainCities) {
var city = place.replace(/_/g, ' ');
$('#testMenu').append("<li onclick=testWeather('" + place + "');><a href='#'>" + city + "</a></li>");
}
};
function testWeather(cityLocation) {
currentLat = mainCities[cityLocation].lat;
currentLong = mainCities[cityLocation].lon;
currentRegion = mainCities[cityLocation].region;
currentCity = mainCities[cityLocation];
currentCountry = mainCities[cityLocation].country;
getWeather();
};
function getLocation() {
$.getJSON('http://ip-api.com/json/?callback=?', function (data) {
currentRegion = data.regionName;
currentCity = data.city;
currentCountry = data.country;
currentLat = data.lat;
currentLong = data.lon;
//$("#cityname").text(currentCity);
getWeather();
});
};
function getWeather() {
$("#cityname").text(currentCity);
$("#state").text(currentRegion);
$("#country").text(currentCountry);
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function (json) {
var showfahrenheit = true;
var tempfahrenheit = Math.round(json.main.temp);
var temcelcius = Math.round((tempfahrenheit - 32) * 5 / 9);
$("#temp").html(tempfahrenheit);
$('#unit-switch').on('click', function () {
if (showfahrenheit === false) {
$("#temp").html(tempfahrenheit);
showfahrenheit = true;
} else {
$("#temp").html(temcelcius);
showfahrenheit = false;
}
$("#unit-toggle").toggleClass("toggle");
//$('#temp').toggleClass('toggle');
});
});
};
关于javascript - 如何从本地天气应用程序的下拉菜单中显示国家/地区的信息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42400685/
这个问题在这里已经有了答案: Where am I? - Get country (10 个答案) How can I get my Android device country code with
有办法检查吗?我有一个应用程序 URL,除非用户有英国应用商店,否则我不想打开该 URL。不幸的是,这个应用程序在许多国家/地区都可用,因此当我在链接上添加“gb”时,它会被重定向到用户的本地区域。
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以
获取设备当前区域的最佳方法是什么?假设用户在德国并使用意大利语作为设备语言。如果我使用 Locale.getDefault(),那么国家和语言就会相互映射,即语言是it,国家是IT。我想要的是它和DE
有人可以给我一个示例或教程,其中显示国家及其代码的下拉列表我的代码显示错误的新西兰语言代码,它显示 mi-NZ 而不是 en-NZ ASP.NET protected void Page_Load(o
我是 Ajax 和 PHP 的新手,遇到动态下拉国家和州的问题。 虽然我已经检查了 stackOverflow 中的所有答案,但我无法清楚地了解我们应该如何成功地编写代码以获得所需的结果。 count
我一直在开发一个注册表单应用程序,其中使用了几个微调器小部件。微调器用于选择国家、州和城市。因此,这些微调器需要以某种方式相互连接(下面的代码将展示我如何尝试实现这一点)。 表单代码: fragmen
如果你去http://profile.microsoft.com并编辑您的个人信息,您将选择您的国家。选择国家/地区后,城市和/或州信息会根据该国家/地区的预期变化。有没有人有任何关于如何实现这一目标
我有一个带有经纬度坐标的 data.frame: df<-data.frame( lat=c(40, 30, 40.864), lon=c(0, 20, 1.274) )
我正在尝试在将与 django-allauth 一起使用的注册表中添加 django-countries。按照说明 https://github.com/SmileyChris/django-coun
嗨,我想为国家和州实现下拉列表。州下拉列表应根据所选国家/地区更改其值。 是否有任何插件或 gem 可以在 Rails 中执行此操作。 最佳答案 试试卡门插件: http://autonomousma
我的服务器上安装了基于PHP的Youtube克隆系统。 几个国家使用相同的系统。假设我有3个域都指向同一系统: www.site.hr www.site.ba www.site.rs 他们都重定向到一
在我的 Azure DNS 和域提供商中设置后,我想使用我的国家/地区域名 mydomain.id,但我仍然无法在应用服务中验证我的域。我已经仔细检查了所有内容,我认为我的设置已经正确。现在我想知道我
最近,我们开始遇到向网络应用程序的用户呈现过时的国家/地区列表的问题。 我们目前有一些数据库表来存储本地化的国家/地区名称及其地区(州)。然而,随着地球的发展,该列表在不断演变,并且事实证明维护起来很
This is the third iteration of this question as errors have been solved (在一些人的感激帮助下)。为了避免对到底发生了什么感到困
全部, 我们的应用程序需要有关 ISO 国家和货币的数据(其中数据必须是最新的)。我们确实从 ISO 自己购买了国家/货币数据,但是我们仍然需要对数据执行大量手动操作,以及编写我们自己的工具来读取数据
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我想使用 PHP 和 jQuery 执行以下操作 https://www.careerbuilder.com/share/register.aspx?sc_cmp1=JS_LoginASPX_RegN
假设我们有一个包含所有国家/地区代码的代码列表。国家代码是 Countries 表的主键,它在数据库中的许多地方用作外键。在我的应用程序中,国家通常显示为多个表单的下拉列表。 一些过去曾经存在的国家不
我想根据语言环境获取当前日期/时间。如果我传递 locale 对象,我需要获取国家/地区的相关日期/时间。 最佳答案 从 Java 8 开始,您有 LocalDateTime 和 ZonedDateT
我是一名优秀的程序员,十分优秀!