0

我有一个名为 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？

4

1 回答 1

2

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

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

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);

至于动画，它只适用于resize；这是有意的，这就是插件的构建方式，您可以使用我添加到 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();
}
于 2014-11-07T09:01:46.323 回答