一个容器中的多个均衡器答案

【问题标题】：Multiple equalizers in one container一个容器中的多个均衡器
【发布时间】：2016-03-23 09:37:49
【问题描述】：

是否可以在一个容器中初始化多个Equalizers？

<div class="row props-set" >
  <div class="small-12 columns text-center" data-equalizer="header"  data-equalizer="paragraph" data-equalizer="image" data-equalize-on="medium">
    <div class="props-box">
        <div class="image" data-equalizer-watch="image"><img src="assets/img/props1.png" alt=""></div>
        <h3 data-equalizer-watch="header">Lorem ipsum dolor sit.</h3>
        <p data-equalizer-watch="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, iste!</p>
    </div>
    <div class="props-box">
        <div class="image" data-equalizer-watch="image"><img src="assets/img/props2.png" alt=""></div>
        <h3 data-equalizer-watch="header">Dolores, dolorum omnis ex.</h3>
        <p data-equalizer-watch="paragraph">Sint natus nam blanditiis temporibus labore, tempore consectetur beatae dolores.</p>
    </div>
    <div class="props-box">
        <div class="image" data-equalizer-watch="image"><img src="assets/img/props3.png" alt=""></div>
        <h3 data-equalizer-watch="header">Odit quasi ipsa, mollitia.</h3>
        <p data-equalizer-watch="paragraph">Libero quis omnis, beatae unde expedita nostrum quidem non necessitatibus!</p>
    </div>
  </div>
</div>

当我将data-equalizer 的初始化划分为单独的 div 时，一切正常。

<div class="row props-set"  data-equalizer="image" data-equalize-on="medium">
   <div class="dummy-div" data-equalizer="paragraph" data-equalize-on="medium"> 
      <div class="small-12 columns text-center" data-equalizer="header" data-equalize-on="medium">

【问题讨论】：

您是否尝试过逗号分隔值，例如data-equalizer="header, paragraph"?

标签： html zurb-foundation zurb-foundation-6

【解决方案1】：

不可能在一个容器中初始化多个均衡器。最快的解决方案是在 .row.props-set 之前添加另一个行容器并将 data-equalizer="header" 放在上面。 (Foundation)

我个人更喜欢使用自定义脚本来解决这个问题：

HTML：

<div class="row" data-equal="ONE,TWO">
    <div class="medium-4">
        <div class="top" data-equal-watch="ONE"></div>
        <div class="bottom" data-equal-watch="TWO"></div>
    </div>
    <div class="medium-4">
        <div class="top" data-equal-watch="ONE"></div>
        <div class="bottom" data-equal-watch="TWO"></div>
    </div>
    <div class="medium-4">
        <div class="top" data-equal-watch="ONE"></div>
        <div class="bottom" data-equal-watch="TWO"></div>
    </div>
</div>

脚本：

function Equal(){
    $("[data-equal]").each(function(){
        var parent = $(this);
        var type = parent.attr('data-equal');
        var array = type.split(",");

        $.each(array,function(i,e){
            var H = 0;
            parent.find( "[data-equal-watch="+e+"]" ).each(function(){
                var h = $(this).height();
                if( h > H ){ H = h; }
            });
            console.log(H);
            $("[data-equal-watch="+e+"]").height(H);
        });
    });
}

【讨论】：