jQuery:窗口大小调整功能问题

jQuery: Window resize function issues

本文关键字：功能 问题 调整 窗口大小 jQuery      更新时间：2023-09-26

我有一段代码运行得很好：

jQuery

$(document).ready(function(){
   $(".fadeinbg").click(function(){
      $("#content").fadeIn();
   });
   var height = $(window).height();
   var width = $(window).width();
   $('#content').css({"min-height": height + "px"});
   $('#content').css({"width": (width - 200) + "px"});
});

我现在试图实现的是在浏览器窗口调整大小后更新jQuery，方法是在代码底部添加以下行：$(window).resize()

jQuery

$(document).ready(function(){
   $(".fadeinbg").click(function(){
      $("#content").fadeIn();
   });
   var height = $(window).height();
   var width = $(window).width();
   $('#content').css({"min-height": height + "px"});
   $('#content').css({"width": (width - 200) + "px"});
   $(window).resize(function() {
   });
});

但不知怎么的，这根本不起作用。你知道我做错了什么吗？

你想得太多了。

$(document).ready(function(){
   $(".fadeinbg").click(function(){
       $("#content").fadeIn();
   });
   var setSize = function () {  //define a function with the code you want to call    
       var height = $(window).height();
       var width = $(window).width();
       $('#content').css(
           { 
               "min-height": height + "px", 
               "width": (width - 200) + "px" 
           }
       );
   };
   $(window).resize(setSize);  //set the function to resize
   setSize();  //call the function now
});

您的功能非常有效，请尝试调整窗口大小并检查控制台。它运行良好。测试项目的其余部分

$(document).ready(function(){
    $(window).resize(function() {
        console.log("width------:"+$( window ).width() +" height------:"+$(window).height())
    });
});
相关文章：