javascript - 如何添加或调整此代码以同时监听浏览器大小调整？

Question

以下代码可以满足我网站上的需要:

$(文档).ready(function() { $(".position").css("height", $(".wrapper-slider").height()); });

它使我的位置 div 与包装 slider 的高度相同。

但是，如果我更改窗口大小，它不会重新触发此 javascript 所做的大小调整。

我想也许添加这样的行会起作用:

$( 窗口 ).resize(function() { $(".position").css("height", $(".wrapper-slider").height()); });

然而，事实并非如此。我必须手动单击浏览器上的“重新加载”或“刷新”才能触发调整大小。我错过了什么？

如果有帮助，这是最初的灵感:http://jsfiddle.net/Jyu94/

看起来我也可以使用这个:

$(窗口).调整大小(函数(){ 位置.reload();} );

我不确定如何将两者结合起来，使其成为一个命令。

Answer 1

你只是忘记在获取.wrapper-slider div的高度后添加+ "px"!这是一个示例(在整页中运行它，以便您可以调整大小):

$(document).ready(function(){
  var new_height = $(".wrapper-slider").height() + "px";
  $(".position").css("height", new_height); // SET HEIGHT

  $(".position .dim").text(new_height); // DISPLAY NEW HEIGHT
  $(".wrapper-slider .dim").text(new_height); // DISPLAY NEW HEIGHT
});

$( window ).resize(function() {
  var new_height = $(".wrapper-slider").height() + "px";
  $(".position").css("height", new_height); // SET HEIGHT

  $(".position .dim").text(new_height); // DISPLAY NEW HEIGHT
  $(".wrapper-slider .dim").text(new_height); // DISPLAY NEW HEIGHT
});

/* MOST OF THE STYLING HERE IS PURELY AESTHETIC AND DOES NOT AFFECT ANSWER :) */ 

div {
  display: inline-block;
  text-align: center;
  width: 45vw;
  min-width: auto;
  padding: 20px 0px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.position {
  background-color: #d55;
  height: 75px; // NOTE THAT THE JS CODE OVERRIDES THIS
}
.wrapper-slider {
  background-color: #da1;
  height: 50vh;
}
.class {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}
.dim, .class {
   font-family: "Courier"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="position">
<span class="class">.position</span>
<p class="dim"></p>
</div>
<div class="wrapper-slider">
<span class="class">.wrapper-slider</span>
<p class="dim"></p>
</div>