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

时间:2017-02-18 23:25:07

标签: javascript jquery

请你看一下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>

2 个答案:

答案 0 :(得分:0)

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

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

  1. $( “[ID ^ = '盒 - ']”)
  2. $(“。box”)和div类似于class =“col-md-12 box”

答案 1 :(得分:0)

首先,您使用了错误的选择器。您需要查询名为“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'});
    });
});