文档上的div等高动画已准备就绪

Question

我有一个名为equal-heights.js的脚本，它与undercore.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：如果您愿意对插件进行更多更改，只需在if(settings.responsive === true)检查中删除$(window).resize(function()，即可使其正常工作。；）

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