Question

我想用jQuery制作响应式块。我有2个立方体块，但它们的宽度不同。我写了一些小行，以使它们响应，但现在第二个占据第一div高度并改变调整大小。在此 fiddle 中，您可以在调整窗口宽度时看到它。

我想，不同的立方体调整大小不同并制作立方体形式。

还有我的代码

function cube(){
    var divWidth = $('.cube').width(); 
    $('.cube').height(divWidth);
}

Answer 1

您可以使用jQuery .each()函数。检查下面的代码段

cube();
$(window).resize(cube);

function cube() {
    $('.cube').each(function() {
    $(this).height($(this).width());
  }); 
    
}

.block1 {
  background: red;
  max-width: 300px;
  width: 100%;
}

.block2 {
  background: blue;
  max-width: 70px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block1  cube"></div>
<br/>
<div class="block2 cube"></div>

Answer 2

你必须使用forEach循环遍历div

cube();

$(window).resize(cube);

function cube(){
$('.cube').each(function(){
        var divWidth = $(this).width(); 
    $(this).height(divWidth);
})

}

Answer 3

请参阅此处更新的小提琴Updated Fiddle

<div class="block1  cube"></div>
<br/>
<div class="block2 cube"></div>

CSS：

.block1{


background:red;
  width:100%;

}

.block2{
  background:blue;
  width:100%;
}

Js：

$(window).resize(function(cube){
cube();
function cube(){
    var divWidth = $('.cube').width(); 
    $('.cube').height(divWidth);
    }

});

多个div高度与宽度相同

3 个答案: