Question

请你看一下this demo并告诉我为什么我无法动态设置.box的高度？

$(function(){
    $(window).load(function(){ // On load
        $('.box').css({'height':(($(window).height()))+'px'});
    });
    $(window).resize(function(){ // On resize
        $('.box').css({'height':(($(window).height()))+'px'});
    });
});

<section>
<div class="col-md-12" id="box-1">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-2">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-3">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-4">Height has been set!</div>
</section>
<section>
<div class="col-md-12" id="box-5">Height has been set!</div>
</section>

Answer 1

你指的是一个不存在的课程。而不是$（“。box”），使用$（“[id ^ ='box-']”） - 你不是在寻找带有“box”类的那些，而是那些带有 id属性的人使用字符串'box - '。

（或者，您可以为要调整大小的每个元素添加一个“box”类，并保留原始jQuery选择器;也许这是一种更好的方法，它取决于您网站其余部分的逻辑。您决定。）

$（ “[ID ^ = '盒 - ']”）
$（“。box”）和div类似于class =“col-md-12 box”

Answer 2

首先，您使用了错误的选择器。您需要查询名为“col-md-12”的类。

然后，您正在使用从3.0中的JQuery中删除的window.load()事件（请参阅here）。您可以使用$(document).ready(function() {})或$(window).on("load",function(){})

您的代码应如下所示：

$(function(){
    $(document).ready(function(){ // On load
        $('.col-md-12').css({'height':(($(window).height()))+'px'});
    });
    $(window).resize(function(){ // On resize
        $('.col-md-12').css({'height':(($(window).height()))+'px'});
    });
});

无法使用jQuery动态设置Div的高度

2 个答案: