0
我有這個天氣頁面，每次我點擊按鈕它從Celcius變爲華氏溫度或反之亦然。按鈕被觸發兩次，元素不再被渲染
發生的事情是，一旦我第一次點擊，它就可以正常工作，但如果再次單擊它，我的控制檯日誌會顯示它執行了兩次並且不再呈現該元素（#link ）。
$("#data").on('click', '#link', function() {
var html2 = "";
html2 += '<button class="temp" id="link">'
if (flag == 0){
console.log("c to f");
html2 += "<h1>" + celciusToFahrenheit(Math.round(json.main.temp)) + " °F</h1>";
flag = 1;
} else if (flag == 1){
console.log("f to c");
html2 += "<h1>" + Math.round(json.main.temp) + " °C</h1>";
flag = 0;
}
html2 += "</button>"
$("#link").html(html2);
});
我在內的整個文件波紋管：
$(document).ready(function() {
function getCurrentLocation(callback) {
if (!navigator.geolocation) return;
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
url = ('http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=metric&appid=b464bb8dd84e7e7d36103593a472ae9a');
callback(url);
});
}
function celciusToFahrenheit(celcius) {
var fahrenheit = celcius * (9/5) + 32;
return fahrenheit;
}
getCurrentLocation(function(currLocMap) {
$.getJSON(url, function(json) {
var html = "";
var flag = 0;
html += '<button class="temp" id="link">'
html += "<h1>" + Math.round(json.main.temp) + " °C </h1>";
html += "</button>"
html += "<h1>" + json.name + "</h1>";
html += "<h3>" + json.weather[0].main + "</h3>";
html += "<h3>" + json.weather[0].description + "</h3>";
\t \t \t $("#data").on('click', '#link', function() {
\t \t \t \t var html2 = "";
\t \t \t \t html2 += '<button class="temp" id="link">'
\t \t \t \t if (flag == 0){
\t \t \t \t \t console.log("c to f");
\t \t \t \t \t html2 += "<h1>" + celciusToFahrenheit(Math.round(json.main.temp)) + " °F</h1>";
\t \t \t \t \t flag = 1;
\t \t \t \t \t console.log(flag);
\t \t \t \t } else if (flag == 1){
\t \t \t \t \t console.log("f to c");
\t \t \t \t \t html2 += "<h1>" + Math.round(json.main.temp) + " °C</h1>";
\t \t \t \t \t flag = 0;
\t \t \t \t \t console.log(flag);
\t \t \t \t }
\t \t \t \t html2 += "</button>"
\t \t \t \t $("#link").html(html2);
\t \t \t });
console.log(json);
console.log(json.name);
console.log(json.main.temp);
console.log(json.weather[0].main);
console.log(json.weather[0].description);
console.log(json.weather[0].icon);
$("#data").html(html);
});
});
});button#link { background:none;border:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> -->
</head>
<body>
<div id="data">
<h4>You are here:</h4>
</div>
</body>
</html>
請附上您的HTML代碼 –
那是因爲你是渲染裏面本身相同的元素？你能否向我們展示HTML代碼以獲得更好的清晰度？此外，一個頁面不能有2個元素具有相同的標識符#JustAnFYI –
該html非常空。我只是用一個實際上我從天氣API – Zzeks