Javascript仅在页面刷新后有效 [英] Javascript only works after page refresh

问题描述

我在网上找到了一些代码，这些代码使我网站上的两个div的长度相等.但是，此代码仅在刷新页面后可用，我不知道是什么原因导致的.任何帮助将不胜感激！

I have some code that I found online that makes both divs on my website become equal lengths. However, this code only works after the page is refreshed and I have no idea what would cause this. Any help would be appreciated!

 // EQUAL HEIGHTS
$.fn.equalHeights = function(px) {
    $(this).each(function(){
        var currentTallest = 0;
        $(this).children().each(function(i){
            if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        });
    if (!px && Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
        // for ie6, set height since min-height isn't supported
        if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
        $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};

// just in case you need it...
$.fn.equalWidths = function(px) {
    $(this).each(function(){
        var currentWidest = 0;
        $(this).children().each(function(i){
                if($(this).width() > currentWidest) { currentWidest = $(this).width(); }
        });
        if(!px && Number.prototype.pxToEm) currentWidest = currentWidest.pxToEm(); //use ems unless px is specified
        // for ie6, set width since min-width isn't supported
        if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'width': currentWidest}); }
        $(this).children().css({'min-width': currentWidest}); 
    });
    return this;
};

 // CALL EQUAL HEIGHTS  
 $(function(){ $('#equalize').equalHeights(); });

推荐答案

发生此现象是因为插件编写得不好.我已经为您修改了它，现在它应该可以工作了.

This behavior happens because the plugin was not well written. I've modified it for you and now it should work.

工作演示

插件脚本:

// EQUAL HEIGHTS
  $.fn.equalHeights = function(px) {
      var currentTallest = 0;
      $(this).each(function(){
          $(this).siblings().each(function(i){
              if ($(this).height() > currentTallest) { 
                currentTallest = $(this).height();
              }
          });
      });

      if (!px && Number.prototype.pxToEm) {
        currentTallest = currentTallest.pxToEm(); 
      }
      $(this).siblings().css({'height': currentTallest, 'min-height': currentTallest});
      return this;
  };

您可以修改equalWidths插件以用作此插件.

You can modify the equalWidths plugin to work as this plugin.

这篇关于Javascript仅在页面刷新后有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！