使用jQuery修改CSS：不會影響CSS一致

我正在構建一個基於Genesis Framework構建的自定義子主題，並且我排隊了一個基於圖像高度計算圖像底部邊距的jQuery腳本（僅在「日記「類別）。計算似乎工作正常，但CSS被修改不一致。有時，當我導航到頁面時，它可以正常工作，而其他時間則不會。如果我刷新頁面，通常不起作用。這發生在Safari，Chrome，Firefox（全部在Mac上）。使用jQuery修改CSS：不會影響CSS一致

這是怎麼了入隊中的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/。

任何想法爲什麼這不能正常工作？

我應該提到，該腳本的所需結果是可變圖像底部邊距，以便保持行高度，以便左側和右側列中的文本彼此對齊。也許有另一種方法來實現這一點？

來源

2013-05-09 Jared Aiden Wolf

圖像的高度只能在圖像加載後才能正確計算。 – adeneo 2013-05-09 19:31:43

因此，如果我將腳本排入頁腳而不是頁眉？儘管我也嘗試過。 – 2013-05-09 19:38:43

無關緊要，當文檔準備就緒時，文檔準備好觸發，而不是在加載圖像時。 window.load是做到這一點的一種方法，我個人更喜歡每個圖像上的加載事件。 – adeneo 2013-05-09 19:39:38

您的函數最好放在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-09 19:37:17

大衛，我用我的腳本替換你和它似乎並沒有影響CSS。但是，當我用'jQuery（window）.load'替換'jQuery（document）.ready'時，它似乎有所作爲。 – 2013-05-09 20:02:47

有點困惑......上面的腳本是你的腳本在'jQuery（window）.load'包裝器（有一些修改，但不會影響結果）。然而，只是增加了關閉窗口。 – 2013-05-09 20:06:02

我應該提到，該腳本的預期結果是可變圖像底部邊距，以便保持行高度，以便左側和右側列中的文本彼此對齊。也許有另一種方法來實現這一點？ – 2013-05-09 20:22:15

使用jQuery修改CSS：不會影響CSS一致

回答

相關問題