javascript - 垂直对齐 - 基础 5 - 简单的 Javascript

Question

我使用了解释的技术 here (js.fiddle link)实现我页面上某个部分的垂直对齐。

我遇到的问题是我想在页面的不同部分重复使用相同的技术。

目前这是有效的，但显然第一个实例的高度然后被应用到其他地方完全不相关的部分，并且没有实现垂直对齐。有人可以帮我修改 js(也许使用“this”吗？)以允许使用相同的代码将高度应用于我页面不同部分的不同元素？

或者每次我想使用它时都必须用不同的 var/class 名称复制这段代码吗？

下面的代码片段

HTML

<div class="row row_v_align">
  <div class="small-3 columns column_v_align">
    <div class="v_align"><img src="spade.png"></div>
  </div>
  <div class="small-9 columns">
    <h3>Title</h3><p>Content</p>
  </div>
</div>
<div class="row row_v_align">
  <div class="small-3 columns column_v_align">
    <div class="v_align"><img src="bullsEye.png"></div>
  </div>
  <div class="small-9 columns">
    <h3>Title</h3><p>Content.</p>
  </div>
</div>

CSS

.row_v_align {
  display: table;
}
.v_align {
  display: table-cell;
  vertical-align: middle;
}

JS

$(window).on("resize", function () {
  var rowHeight = $(".row_v_align").height();
  console.log(rowHeight);
  $(".column_v_align").height(rowHeight);
  $(".v_align").height(rowHeight);
}).resize();

Answer 1

我用你链接的 fiddle 测试了下面的代码。

$(document).ready(function(){
    $(".row").each(function(){
        var rowHeight = $(this).height();
        console.log(rowHeight);
        $(".column", this).height(rowHeight);
        $(".v_align", this).height(rowHeight);
    });
});

所以这对你来说应该有效:

$(window).on("resize", function () {
  $(".row_v_align").each(function(){
    var rowHeight = $(this).height();
    console.log(rowHeight);
    $(".column_v_align", this).height(rowHeight);
    $(".v_align", this).height(rowHeight);
  });
}).resize();

• each() 为每个匹配的元素运行函数
• $("...", this) 确保在当前行内进行更改