Javascript 页面加载后功能无法正常工作

Question

所以我试图在页面加载后更改 3 个滑块的背景（在此页面中：https://www.cuscoperu.com/es/testjs），我尝试了以下代码：

jQuery(document).ready(function() {

    function ChangeSliderBck(num, image){
        var urlimg = jQuery('li#Slider-home-' + num).find('div.tp-bgimg.defaultimg').css('background-image');
        console.log("url " + num +  " before: " + urlimg);
        jQuery('li#Slider-home-' + num).find('div.tp-bgimg.defaultimg').css('background-image','url('+ image +')');
        urlimg = jQuery('li#Slider-home-' + num).find('div.tp-bgimg.defaultimg').css('background-image');
        console.log("url " + num +  " after: " + urlimg);
    }
    function ChangeSliders(){
        if(window.location.href.indexOf("es/testjs") > -1){
            var windowsize = jQuery(window).width();
            if(windowsize >= 768){
                ChangeSliderBck(1, "https://www.cuscoperu.com/images/sliders-cuscoperu/slider-Machu-Picchu.jpg");
                ChangeSliderBck(2, "https://www.cuscoperu.com/images/sliders-cuscoperu/slider-huayna-picchu.jpg");
                ChangeSliderBck(3, "https://www.cuscoperu.com/images/sliders-cuscoperu/slider-caminata.jpg");
            }
        }
    }
    ChangeSliders();
});

我希望控制台输出是这样的，以确认 URL 已被替换：

url 1 before: url("https://www.cuscoperu.com/images/sliders-cuscoperu/slidercellphone/slider-Machu-Picchu-movil.jpg")
url 1 after: url("https://www.cuscoperu.com/images/sliders-cuscoperu/slider-Machu-Picchu.jpg")

但是 css 背景图像 url 实际上并没有改变，我在控制台中得到的是：

url 1 before: undefined
url 1 after: undefined
url 2 before: undefined
url 2 after: undefined
url 3 before: undefined
url 3 after: undefined

任何帮助，我是 javascript 的新手，我不确定我可能做错了什么，我直接在浏览器的控制台中执行了这段代码并且它工作正常，任何想法或随时欢迎帮助，谢谢。

Answer 1

1) 您可以使用CSS 媒体查询来设置背景图片，不需要JS。 https://www.w3schools.com/css/css3_mediaqueries_ex.asp

2) 你的 "REVOLUTION SLIDER" 比你的执行脚本创建得晚（因此你正在搜索的嵌套 div.tp-bgimg.defaultimg 。每次初始页面加载， #Slider-home-1 li 只包含一个<img>。因此，解决方案是运行在初始化所述滑块并创建元素后编写脚本。

Javascript 页面加载后功能无法正常工作

Javascript function not working properly after page loaded

javascript

css

jquery

function

console.log