Question

我正在构建一个基于Genesis Framework的自定义子主题，我正在排队一个jQuery脚本，它根据图像的高度计算图像底部边距（仅在“日记”类别中）。计算似乎工作正常，但CSS的修改不一致。有时，当我导航到页面时，它可以正常工作，有时则不会。如果我刷新页面，它通常不起作用。这种情况发生在Safari，Chrome，Firefox（所有在Mac上）。

这就是我在functions.php中加入脚本的方式：

add_action( 'wp_enqueue_scripts', 'lpt_enqueue_script' );
function lpt_enqueue_script() {
    wp_enqueue_script( 'variable-margins', get_stylesheet_directory_uri() . '/js/variable-margins.js', array( 'jquery' ), '', false );
}

脚本如下所示：

jQuery(document).ready(
function() {
    if (jQuery('.category-diary img').length > 0){
        var lineHeight = 21;
        jQuery('.category-diary img').each(
        function() {
            var remainder = jQuery(this).height() % lineHeight;
            jQuery(this).css({'margin-bottom': (remainder - 5 + (lineHeight)) + 'px'});
        });     
    };
});

图片受影响的单个网页之一的网址是：http://lovelandprovincetown.com/this-is-a-test-post/。

为什么这不能正常工作？

我应该提一下，此脚本的所需结果是可变图像底部边距，以便保留行高，以便左右列中的文本彼此对齐。也许有另一种方法来实现这个目标？

Answer 1

您的函数最好放在jQuery(window).load()包装器中，而不是doc准备好。这样可以加载图像，并通过脚本正确计算它们的高度。

(function($, window) {

    $(window).load(function() 
    {
        var images = $('.category-diary img');

        if (images.length > 0)
        {
            var lineheight = 21;

            images.each(function(index)
            {
                var self = $(this),
                    remainder = self.height() % lineheight;

                self.css({
                    'margin-bottom': ((remainder - 5) + lineHeight) + 'px'
                });
            });
        }
    });
})(jQuery, window);

使用jQuery修改CSS：不会一直影响CSS

1 个答案: