Question

我可以添加代码，但我认为这不是必需的。假设通过JavaScript生成的HTML代码是有效的（事实如此），那么为什么在下一行编写JavaScript以将类追加到HTML却没有这样做呢？

这是我的代码：

let info = document.getElementById('info');
let week = document.getElementById('week');

    /*Initializer Function*/
    window.addEventListener('load', () => {
        let long;
        let lat;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                long = position.coords.longitude;
                lat = position.coords.latitude;

                const proxy = 'https://cors-anywhere.herokuapp.com/';
                const api = `${proxy}https://api.darksky.net/forecast/d571a1e2483b31605b94edaae84c647e/${lat},${long}`;

                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4 && this.status === 200) {
                        let obj = JSON.parse(this.responseText);
                        console.log(obj);
                        document.getElementById('temperature-degree').innerHTML = obj.currently.apparentTemperature;
                        document.getElementById('location').innerHTML = obj.timezone;
                        document.getElementById('temperature-description').innerHTML = obj.currently.summary;
                        setIcons(obj.currently.icon, document.getElementById('currentDayIcon'));
                        for (let i = 0; i < obj.hourly.data.length; i++) {
                            info.innerHTML += `<div id='hour${i + 1}' class='hourly'>` + `<canvas id='hourIcon${i + 1}'></canvas>` + `<h3 id='hourTemp${i + 1}'></h3>` + `<p id='hourSummary${i + 1}'></p>` + '</div>';
                            setIcons(obj.hourly.data[i].icon, document.getElementById(`hourIcon${i + 1}`));
                            document.getElementById(`hourTemp${i + 1}`).innerHTML = obj.hourly.data[i].temperature;
                            document.getElementById(`hourSummary${i + 1}`).innerHTML = obj.hourly.data[i].summary;
                        }
                        for (let i = 0; i < 5; i++) {
                            week.innerHTML += `<div id='day${i + 1}' class='daily'>` + `<canvas id='dayIcon${i + 1}'></canvas>` + `<h2 id='dayTemp${i + 1}'></h2>` + `<p id='daySummary${i + 1}'></p>` + '</div>';
                            setIcons(obj.daily.data[i].icon, document.getElementById(`dayIcon${i + 1}`));
                            document.getElementById(`dayTemp${i + 1}`).innerHTML = obj.daily.data[i].temperatureMax;
                            document.getElementById(`daySummary${i + 1}`).innerHTML = obj.daily.data[i].summary;
                        }
                    }
                };
                xhr.open("GET", api, true);
                xhr.send();
            });
        }
        function setIcons(icon, iconId) {
            const skycons = new Skycons({color: 'white'});
            const currentIcon = icon.replace(/-/g, '_').toUpperCase();
            skycons.play();
            return skycons.set(iconId, Skycons[currentIcon]);
        }
        ;

    });

for (let i = 1; i < 6; i++) {
    $(`#day${i}`).bind('mouseenter mouseleave', function () {
        $(this).toggleClass('easeIn');
        $(this).toggleClass('pointer');
        });
    };

...正如您所看到的，最后一个for循环旨在通过jQuery将侦听器附加到AJAX调用中创建的day div，但是尽管我进行了AJAX调用同步强制，但它们并未得到应用脚本的其余部分要等到完成为止。怎么了？

Answer 1

找出问题所在（与范围有关）。将jQuery函数添加到AJAX调用中可以在创建时添加所有内容。

从Javascript加载HTML创建后，JavaScript不添加添加类

1 个答案: