如何点击＆＃39; div下的活动工作

Question

＆＃13;

＆＃13;

var api = "https://fcc-weather-api.glitch.me/api/current?";
var lat, lon;
var unit = "C";
var currentTempInCelcius;

$(document).ready(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var lat = "lat=" + position.coords.latitude;
            var lon = "lon=" + position.coords.longitude;
            getWeather(lat, lon);
        });
    } else {
        window.alert("Geolocation is not supported by this browser.");
    }

    $('#unit').click(function () {
        var currentUnit = $('#unit').text();
        var newUnit = currentUnit == "C" ? "F" : "C";
        $('#unit').text(newUnit);
        if (newUnit === "F") {
            $('#temp').text(Math.round(($('#temp').text() * 1.8) + 32));
        } else {
            $('#temp').text(Math.round(($('#temp').text() - 32) / 1.8));
        }
    });

    function getWeather(lat, lon) {
        var apiUrl = api + lat + "&" + lon;
        $.ajax({
            url: apiUrl, success: function (result) {
                $('#city').text(result.name + ", ");
                $('#country').text(result.sys.country);
                $('#temp').text(result.main.temp);
                $('#unit').text(unit);
                $('#currentWeather').text(result.weather[0].main);
                $('#desc').text(result.weather[0].description);
                addIcon(result.weather[0].main);
            }
        });
    }
    function addIcon(weather) {
        var now = new Date;
        if (now.getHours() + 1 >= 6 && now.getHours() + 1 <= 18) {
          $('#icon').removeClass();
            switch (weather) {
                case 'Clear':
                    $('#icon').addClass('wi wi-day-sunny');
                    break;
            }
                $('.bg').addClass(weather);
        } else {
          $('#icon').removeClass();
            switch (weather) {
                case 'Rain':
                    $('#icon').addClass('wi wi-night-rain');
                    break;
            }
          $('.bg').addClass('night' + weather);
        }
    }

});

＆＃13;

#container { width: 100vw; height: 100vh; margin: auto; position: absolute; }
p { font-size: 55px; margin: 25px 0; font-family: 'Roboto', sans-serif;}
i { font-size: 65px; }
.bg { width: 100vw; height: 100vh; opacity: 0.5; z-index: -10; }
.Clear { background: url(https://images.unsplash.com/photo-1501412804587-2a024e482830?auto=format&fit=crop&w=1050&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D) ; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="container">
    <p><span id="city"></span><span id="country"></span></p>
    <p><span id="temp"></span><span id="unit"></span></p>
    <p id="currentWeather"></p>
    <p id="desc"></p>
    <i id="icon"></i>
  </div>
<div class="bg"></div>

＆＃13;

＆＃13;

＆＃13;

我正在制作本地天气应用程序。

我想在执行click事件时更改单位。 但是，因为我添加了元素，所以它不起作用。 我使用.bg标签为其添加背景，因此每当天气变化时，背景也会发生变化。

我想是因为.bg div覆盖了#container div。所以我尝试了z-index，但它仍然没有用。 我能做些什么才能让它发挥作用？ 谢谢:)）

Answer 1

更改屏蔽click事件的容器的相对位置。以下是工作解决方案。

＆＃13;

＆＃13;

var api = "https://fcc-weather-api.glitch.me/api/current?";
var lat, lon;
var unit = "C";
var currentTempInCelcius;

$(document).ready(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var lat = "lat=" + position.coords.latitude;
            var lon = "lon=" + position.coords.longitude;
            getWeather(lat, lon);
        });
    } else {
        window.alert("Geolocation is not supported by this browser.");
    }

    $('#unit').click(function () {
        var currentUnit = $('#unit').text();
        var newUnit = currentUnit == "C" ? "F" : "C";
        $('#unit').text(newUnit);
        if (newUnit === "F") {
            $('#temp').text(Math.round(($('#temp').text() * 1.8) + 32));
        } else {
            $('#temp').text(Math.round(($('#temp').text() - 32) / 1.8));
        }
    });


    function getWeather(lat, lon) {
        var apiUrl = api + lat + "&" + lon;
        $.ajax({
            url: apiUrl, success: function (result) {
                $('#city').text(result.name + ", ");
                $('#country').text(result.sys.country);
                $('#temp').text(result.main.temp);
                $('#unit').text(unit);
                $('#currentWeather').text(result.weather[0].main);
                $('#desc').text(result.weather[0].description);
                addIcon(result.weather[0].main);
            }
        });
    }
    function addIcon(weather) {
        var now = new Date;
        if (now.getHours() + 1 >= 6 && now.getHours() + 1 <= 18) {
          $('#icon').removeClass();
            switch (weather) {
                case 'Clear':
                    $('#icon').addClass('wi wi-day-sunny');
                    break;
            }
                $('.bg').addClass(weather);
        } else {
          $('#icon').removeClass();
            switch (weather) {
                case 'Rain':
                    $('#icon').addClass('wi wi-night-rain');
                    break;
            }
          $('.bg').addClass('night' + weather);
        }
    }

});

＆＃13;

#container{
	 width: 20%; 
	 height: 20%; 
	 margin: auto; 
  }

p { 
	font-size: 55px; 
	margin: 25px 0; 
	font-family: 'Roboto', 
	sans-serif;}

i { 
	font-size: 65px; }

.bg { 
	width: 100vw; 
	height: 100vh; 
	opacity: 0.5; 
	z-index: 1; }

.Clear { 
	background: url(https://images.unsplash.com/photo-1501412804587-2a024e482830?auto=format&fit=crop&w=1050&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D) ; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
            <p><span id="city"></span><span id="country"></span></p>
            <p><span id="temp"></span><span  id="unit"></span></p>
            <p id="currentWeather"></p>
            <p id="desc"></p>
            <i id="icon"></i>
    </div>
<div class="bg"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你好删除#container的位置：绝对并添加一些文本到#unit span /添加一些属性（根据你的要求）。

#unit {
  width: 50px;
  height: 50px;
  display: inline-block;
}

Answer 3

在您的情况下，您可以从position: absolute删除#container并将其添加到.bg，然后添加top:0;left:0，请查看以下更新的代码段：

var api = "https://fcc-weather-api.glitch.me/api/current?";
var lat, lon;
var unit = "C";
var currentTempInCelcius;

$(document).ready(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var lat = "lat=" + position.coords.latitude;
            var lon = "lon=" + position.coords.longitude;
            getWeather(lat, lon);
        });
    } else {
        window.alert("Geolocation is not supported by this browser.");
    }

    $('#unit').click(function () {
        var currentUnit = $('#unit').text();
        var newUnit = currentUnit == "C" ? "F" : "C";
        $('#unit').text(newUnit);
        if (newUnit === "F") {
            $('#temp').text(Math.round(($('#temp').text() * 1.8) + 32));
        } else {
            $('#temp').text(Math.round(($('#temp').text() - 32) / 1.8));
        }
    });

    function getWeather(lat, lon) {
        var apiUrl = api + lat + "&" + lon;
        $.ajax({
            url: apiUrl, success: function (result) {
                $('#city').text(result.name + ", ");
                $('#country').text(result.sys.country);
                $('#temp').text(result.main.temp);
                $('#unit').text(unit);
                $('#currentWeather').text(result.weather[0].main);
                $('#desc').text(result.weather[0].description);
                addIcon(result.weather[0].main);
            }
        });
    }
    function addIcon(weather) {
        var now = new Date;
        if (now.getHours() + 1 >= 6 && now.getHours() + 1 <= 18) {
          $('#icon').removeClass();
            switch (weather) {
                case 'Clear':
                    $('#icon').addClass('wi wi-day-sunny');
                    break;
            }
                $('.bg').addClass(weather);
        } else {
          $('#icon').removeClass();
            switch (weather) {
                case 'Rain':
                    $('#icon').addClass('wi wi-night-rain');
                    break;
            }
          $('.bg').addClass('night' + weather);
        }
    }

});

#container { width: 100vw; height: 100vh; margin: auto;  }
p { font-size: 55px; margin: 25px 0; font-family: 'Roboto', sans-serif;}
i { font-size: 65px; }
.bg { width: 100vw;position: absolute;top:0;left:0; height: 100vh; opacity: 0.5; z-index: -10; }
.Clear { background: url(https://images.unsplash.com/photo-1501412804587-2a024e482830?auto=format&fit=crop&w=1050&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D) ; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="container">
    <p><span id="city"></span><span id="country"></span></p>
    <p><span id="temp"></span><span id="unit"></span></p>
    <p id="currentWeather"></p>
    <p id="desc"></p>
    <i id="icon"></i>
  </div>
<div class="bg"></div>