Question

我有div元素附加在父div上。根据屏幕大小的不同，div元素应该调整大小，但是我使用jquery .css（）这样做的努力都失败了。请帮助。以下是我的代码示例

var len = data.length; //a number comes here
var i;
for(i=1;i<len+1;i++){
    $(".app-body").append(
       "<div class='list-box' onclick='OpenHymn("+ i +")'>" +
       "<div class='circle-text'><div class='hym_num'>" + i + "</div></div>" +
       "</div>");
}
//calling the function that should resize the divs
GridBoxes();

function GridBoxes(){
    var width=window.innerWidth;
    var divisible=parseInt(width-40);
    var size=divisible/4;
    var boxes=$('.list-box');
    boxes.css("width",size+"px");
    boxes.css("height",size+"px");

}

Answer 1

将函数放在$(window).resize()内，以便每次调整窗口大小时触发它

代码：

$(window).resize(function() {
  GridBoxes();
})

Example

您应该真正使用媒体查询来解决此类问题。

Answer 2

试试这个

window.addEventListener("resize", GridBoxes);//called on window resize
var len = 4; //changed to a number here for testing
var i;
for(i=1;i<len+1;i++){
    $(".app-body").append(
       "<div class='list-box' onclick='OpenHymn("+ i +")'>" +
       "<div class='circle-text'><div class='hym_num'>" + i + "</div></div>" +
       "</div>");
}
//calling the function that should resize the divs
//GridBoxes();

function GridBoxes(){
    var width=window.innerWidth;
  
    var divisible=parseInt(width-40);
    var size=divisible/4;
  
    var boxes=$('.list-box');
  for(var b=0;b<boxes.length;b++){
   
    boxes[b].css("width",size+"px");
    boxes[b].css("height",size+"px");
    }

}

.list-box{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-body"></div>

样式使用jquery附加的元素

2 个答案: