如何使用 jQuery 设置 DIV 元素的高度

Question

I want to achieve the following我想实现以下

1) On click of.step2-opt 1）点击of.step2-opt

2).quiz__drawer div should get the height of.step2info 2).quiz__drawer div 应该得到.step2info 的高度

3) HTML output should be 3) HTML output 应该是

<div class="quiz__drawer" style="height:height of .step2info div">

4) Using this jQuery code 4) 使用这个 jQuery 代码

$('body').on("click", '.step2-opt', function () {
  $(".quiz__drawer").height(function(){
    $(".step2info").outerHeight();
  });
});

Please help me to fix the jquery code.请帮我修复 jquery 代码。

Answer 1

As you can see this function equalize height after click on first div:如您所见，单击第一个 div 后，此 function 均衡高度：

 $.fn.equalizeHeights = function(){ return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) ) } function test(){ $('.step2info, .quiz__drawer').equalizeHeights(); }

 <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <body> <div class="step2info" onclick="test()">dkdpodkds<br>soskdsopkdspodskpskpkpk<br>sopkspokdspskposkspksapk<br></div> <div class="quiz__drawer"></div> </body>

Answer 2

Here is an example for you to try, hope this helps这是一个供您尝试的示例，希望对您有所帮助

 $('body').on("click", '.step2-opt', function () { // get the height of step2info var height = $('.step2info').css("height"); // set the height of quiz__drawer $('.quiz__drawer').css("height", height) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="step2info" style="height: 200px; width: 200px; background-color: red;"></div> <div class="quiz__drawer" style="height: 100px; width: 200px; background-color: green;"></div> <button class="step2-opt">set height</button>

如何使用 jQuery 设置 DIV 元素的高度

问题描述

2 个解决方案

解决方案1
0 2020-06-12 11:46:38

解决方案2
0 已采纳 2020-06-12 11:53:01

如何使用 jQuery 设置 DIV 元素的高度

问题描述

2 个解决方案

解决方案1 0 2020-06-12 11:46:38

解决方案2 0 已采纳 2020-06-12 11:53:01

解决方案1
0 2020-06-12 11:46:38

解决方案2
0 已采纳 2020-06-12 11:53:01