Question

第一次在这里发布，只是想知道我在为包含菜单元素的外部html文件编写的这个小jquery脚本中出现了什么错误。它适用于调整大小，只是不加载。我已经尝试了一个独立的$（window）.load（）;事件以及似乎没有任何工作。我是jQuery的新手，只知道该做的事和不该做的事！

jQuery(document).ready(function($) {
  var vwidth = $(window).width();
  var vheight = $(window).height();
  var menu = $('#menu_container');

  $( window ).on('load resize', function() {
    if (vwidth >= 1000) {
      menu.css('zoom', '1');
    } else {
      menu.css('zoom', '0.8');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

jQuery(document).ready(function($) {

从上面的功能中删除美元符号（$）。您正在为jQuery.ready函数的作用域重新定义函数的全局变量。

jQuery(document).ready(function() {

编辑

如果这不起作用，请尝试以下一些基本调用，然后查看控制台显示的内容。

单击运行代码段按钮时，得到以下输出：

Document ready()
Window resize()
Window load()
Window load() x2
Window resize()

$(document).ready(function() {
  console.log("Document ready()");
});

$(window).on('load', function() {
  console.log("Window load()");
});

// or

$(window).on({
  load : function() {
    console.log("Window load() x2");
  },
  resize : function() {
    console.log("Window resize()");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

这里有两个问题。 @Mr已经解释过了。多旋风。另一个事实是，DOM准备事件将在window.load事件之后发生。这意味着在jQuery(document).ready执行$(window).load时已经发生，因此window.load的事件注册已经有点晚了。试试这个吧...

//this is essentially the same as jQuery(document).ready
$(function(){
    toggleZoom();

    $(window).on("resize", function(){
        toggleZoom();
    });
});



function toggleZoom(){    
  var vwidth = $(window).width();
  //this isn't needed in this snippet
  //var vheight = $(window).height();
  var menu = $('#menu_container');


    if (vwidth >= 1000) {
      menu.css('zoom', '1');
    } else {
      menu.css('zoom', '0.8');
    }
}

Answer 3

jQuery ready()函数的正确用法是：

jQuery(document).ready(function(){
   //The code you want to execute.
});

有关更多信息，请参见：

https://api.jquery.com/ready/

jQuery窗口加载功能在加载时不执行任何操作

3 个答案:

编辑