0

我正在构建一个基于 Genesis 框架的自定义子主题，并且我正在排队一个 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'});
        });     
    };
});

应该影响图像的单个页面之一的 URL 是： http: //lovelandprovincetown.com/this-is-a-test-post/。

任何想法为什么这不能正常工作？

我应该提到，该脚本的预期结果是可变图像底部边距，以保留行高，以便左右列中的文本相互对齐。也许还有另一种方法可以实现这一目标？

4

1 回答 1

1

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

(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);
于 2013-05-09T19:37:17.370 回答