Question

我有一个名为equal-heights.js的脚本，它与underscore.js一起使用。它使用动画将div调整为最高div的大小（可选）。问题是，当我对页面充电没有任何反应时，它只在我调整浏览器大小时才开始均衡div。

html上的初始化代码：

$(document).ready(function() {

    $('.profile-panel').equalHeights({
        responsive:true,
        animate:true,
        animateSpeed:500
    });

});

你可以在这里看到equal-heights.js：http://webdesign.igorlaszlo.com/templates/js/blogger-equal-heights-responsive.js

当页面加载时，我应该怎么做，动画开始自动均衡div？

Answer 1

我创建了自己的测试，并意识到问题在于插件的编写方式，即它只接受类名的一个值，否则会中断。

这是因为脚本中的以下行：

className = '.'+$(this).prop('class');

这样做是因为它需要元素的class属性并在前面添加一个点（.）;获取当前选择器的一种不错但不太可扩展的方法，因为如果你有多个类名，它只会在第一个类前面放一个点，所以如果你有...

<div class="profile-panel profile-panel-1st-row profile-panel1">

......它会把它变成......

$('.profile-panel profile-panel-1st-row profile-panel1')

...这是可以理解的，这将无法正常工作，因为其他类中缺少点。

要解决这个问题，直到版本1.7，jQuery有一个.selector属性，但现在已经弃用了。相反，他们现在建议将选择器添加为插件功能的参数，如下所示（我根据您的情况量身定制）：

首先在调用函数时定义一个名为selector的选项：

$('.profile-panel-1st-row').equalHeights({
        selector:'.profile-panel-1st-row',
        // ...
    });

然后在插件中设置className变量，如下所示：

var className = options.selector;

你可以做的另一件事是将你用来激活插件的类放在你要使用它的每个元素的第一个插件上，而不是......

<div class="profile-panel profile-panel-1st-row profile-panel1">

......做这个......

<div class="profile-panel-1st-row profile-panel profile-panel1">

...然后您可以在插件中设置className变量，如下所示：

var className = '.'+ $(this).prop('class').split(" ").slice(0,1);

这基本上将类名拆分为由空格划分的部分并取第一个。

要充分利用这两种解决方案，只需将className设置为以下内容：

var className = options.selector || '.'+ $(this).prop('class').split(" ").slice(0,1);

对于动画，它只适用于调整大小;这是插件的构建方式，您可以使用我添加到jsfiddle的插件创建器的原始示例：http://jsfiddle.net/o9rjvq8j/1/

编辑＃2 ：如果您愿意更新插件，只需删除$(window).resize(function()支票中的if(settings.responsive === true)，即可让它正常运行。 ;）

if(settings.responsive === true) {
    //reset height to auto
    $(className).css("height","auto");
    //re initialise
    reInit();
}

在文件准备好的div相等高度动画

1 个答案: