jquery data() 方法并不总是有效？

Question

我在创建可靠的 jquery 代码（将图像大小调整为其父 div 的宽度）时遇到了非常严重的问题。有时它有效，有时却不起作用。起初我以为 IE 只是打扰我，但有时 safari、firefox 或 chrome 也不会触发我的方法。

    $(".post-body img").each(function() {  
        $(this).data('width', $(this).width());
        $(this).data('height', $(this).height());
    });

我将宽度和高度宽度数据方法保存在我的 window.load - 函数中。

之后，我调用 setimgwidth() 函数。

function setimgwidth() {
    var bw = $('.post-body').width();
    $(".post-body img").each(function() {   
            if (bw < $(this).data('width')) {
                $(this).attr( 'width', Math.round(bw) );
                //calculate ratio height
                var newHeight = (bw / $(this).data('width')) * $(this).data('height');
                $(this).attr( 'height', Math.round(newHeight) );
            }
    });
}

所以我检查父 div 是否小于其内部的图像，图像应调整为父 div 的宽度。

我只是不明白为什么这种方法并不总是有效。有时图像会调整大小，有时不会。

你看到什么奇怪的了吗？有什么你会做得更好的吗？ 还有其他方法吗？

谢谢

编辑：

jQuery(function($){//document ready

    $(window).load(function(){

        //Save the original image width
        $(".post-body p img, .post-body .wp-caption img").each(function() {  
            $(this).data('width', $(this).width());
            $(this).data('height', $(this).height());
        });

        //window resize event
        $(window).resize(function() {
            setimgwidth();
        });

        //set image width inside of .post-body
        function setimgwidth() {
            $(".post-body p img, .post-body .wp-caption img").each(function() {
                console.debug($(this).data('width'));
                console.debug($(this).data('height'));
            });
        }

        //call image-resize functions onload
        setimgwidth();

    });

});//document ready

控制台总是告诉我图像的宽度和高度为0。

Answer 1

在一个地方您使用 $(this).attr('width');，而在另一个地方您使用 $(this).width()。尝试 .width() 和 .height()，我相信您应该在这两个地方使用它们：

$(".post-body img").each(function() {  
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
});

$(".post-body img").each(function() {   
        if (bw < $(this).data('width')) {
            $(this).width(Math.round(bw));
            //calculate ratio height
            var newHeight = (bw / $(this).data('width')) * $(this).data('height');
            $(this).height(Math.round(newHeight));            
        }
});

另外（也许不相关）您不应该更改尺寸后要为每个图像设置数据宽度和高度属性吗？

$(".post-body img").each(function() {   
        if (bw < $(this).data('width')) {
            $(this).width(Math.round(bw));
            //calculate ratio height
            var newHeight = (bw / $(this).data('width')) * $(this).data('height');
            $(this).height(Math.round(newHeight));
            $(this).data("width", Math.round(bw));
            $(this).data("height", newHeight);
        }
});

最后，我希望您按照 @Emmett 在他的评论中建议的那样存储加载时的图像尺寸：

$(".post-body img").load(function() {  
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
});

记住 width() 和 height() 返回实际内容的宽度和高度，无论 CSS 属性如何，因此只有在内容/图像或其他内容完全加载后才应捕获这些值。

Answer 2

代码审查（这不是答案）

我重构了您的代码。我相信现在它的可读性要高得多。

function setImgWidth() {
    var b = $(".post-body");
    var bw = b.width();

    b.find("img").each(function() {
            var t = $(this);
            var tw = t.data("width");
            var th = t.data("height");

            if ( bw < tw ) {
                t
                    .width(Math.round(bw))
                    .height(Math.round((bw / tw) * th));
            }
    });
}