你能帮我解决 Jeffrey Way Slider First Attempt imgWidth 错误吗？

Question

我在 YouTube 上按照 Jeffrey 的方法在 30 天内学习 jquery，但我无法使用他的代码让滑块工作。这归结为当变量设置在脚本顶部时 imgWidth 变量设置不正确。

images = sliderUL.find('img'),                    
    imagesLen = images.length,
    current = 1,
    imgWidth = images[0].width; // giving 0 instead of 600??

它得到 0，但是如果我 console.log 图像 [0].width 在脚本中进一步向下单击按钮时它显示正确的值 600。它就像 dom在第一次分配时还没有准备好，或者它在图像宽度已知之前就完成了分配？有人可以告诉我发生了什么事吗？我尝试将整个内容包装在一个文档就绪函数中以防出现问题，但它仍然不起作用

full demo here

Answer 1

您使用的是旧 jquery 版本。在 https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js.

使用 google 托管版本 2.2.0 或更高版本

您可以检查自己的代码，除了 jquery on:

没有任何变化

https://jsfiddle.net/Aschab/jh8s4meo/

工作出色

作为一个好的做法：

jQuery(document).ready(function(){
(function($){

是多余的，试试：

 jQuery(document).ready(function($){

只是我的 2 美分

Answer 2

您必须等到图像加载完毕。看看这个答案：

jQuery width() and height() return 0 for img element

编辑：

完整性：

images.on('load',function(){
    imgWidth = $(this).width();
    console.log(imgWidth);
    totalImgsWidth = imagesLen * imgWidth;
});

Answer 3

images.on('load',function(){
        imgWidth = $(this).width();
        console.log(imgWidth);
        totalImgsWidth = imagesLen * imgWidth;
    });

正如用户 2968356 所指出的那样，这解决了问题

你能帮我解决 Jeffrey Way Slider First Attempt imgWidth 错误吗？

Can You Help Me fix Jeffrey Way Slider First Attempt imgWidth error?

javascript

jquery

slider