Question

我有两个div，.box-1和.box-2。

我想将两者的高度设置为等于更高的高度。

谁能告诉我为什么此代码不起作用？

var $box1Height = $('.box-1').height();
var $box2Height = $('.box-2').height();

if ($box2Height > $box1Height) {
    ($box1Height).height($box2Height)
} else {
    ($box2Height).height($box1Height)
}

Answer 1

您要更新的元素是$(".box-1")和$(".box-2")。您没有更新它们，而是获取了他们的身高值，然后尝试更新他们的身高值的身高值（类似：$(".box-1").height().height(new_value);，这显然不存在。比较是好的，但是更新不是为了正确的元素。

您只能采用元素$('.box-1').height();而不是使用$('.box-1')。

赞：

var box1 = $('.box-1');
var box2 = $('.box-2');

现在我们有了元素本身，让我们使用它的属性。要获取元素的高度，请使用：

box1.height();

要为此height属性设置新值，请使用：

box1.height(new_value);

将它们放在一起：

var box1 = $('.box-1');
var box2 = $('.box-2');
if (box1.height() > box2.height()) {
    box1.height(box2.height())
} else {
    box2.height(box1.height())
}

Answer 2

您可以使用Math.max()来获得两者中最大的高度，而无需使用if语句。然后将两个框的高度都设置为.max()

的结果

var maxHeight = Math.max(box1.height(), box2.height())
box1.height(maxHeight)
box2.height(maxHeight)

下面是一个有效的示例

$(function() {
  // cache the box selectors
  var box1 = $('.box1')
  var box2 = $('.box2')
  
  // determine which box is taller
  var maxHeight = Math.max(box1.height(), box2.height())
  
  // apply the tallest height to both
  box1.height(maxHeight)
  box2.height(maxHeight)
})

.box1 {
  display: inline-block;
  height: 100px;
  width: 50px;
  background: cornflowerblue;
}

.box2 {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: rebeccapurple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">box1</div>
<div class="box2">box2</div>

jQuery-如何动态设置一个div的高度等于另一个div的高度

2 个答案: