Javascript 变量范围或选择器问题

有人能帮我解释一下为什么在运行完这段代码后，

maxWidth

仍然等于-1吗？注意：当我使用

$（“菜单项”）

选择器时，代码按预期工作

我不知道javascript变量是否有问题，但我想如果我设置

var menuItem=$（“菜单项”）

并替换

.load（）

函数中的选择器，其输出将与仅运行

$（“菜单项”）相同。每个（…

编辑：完整脚本文件+HTML:

HTML

JS

var menuItem=$（“菜单项”）；
var menuContainer=$（“.menu主菜单容器”）；
var maxWidth=-1；
$（窗口）。加载（函数（）{
//声明变量
var树脂定时器；
变量计数=$（“.menu项”）.length；
console.log（menuItem）；
//循环菜单项，并检索要乘以计数的最大宽度
console.log（menuItem）；
menuItem.each（函数（）{
maxWidth=Math.max（maxWidth，$（this.width（））；
console.log（最大宽度）；
});
console.log（最大宽度）；
//仅当屏幕宽度大于菜单宽度时才调整li元素的大小
如果（$（窗口）.width（）>maxWidth*计数）{
调整菜单的大小（）；
}否则{
//或者显示移动菜单
移动菜单（）；
};
//在调整大小时（因性能而延迟）
$（窗口）.on（'resize'，函数（e）{
console.log（最大宽度）；
//clearTimeout（resizeTimer）；
//resizeTimer=setTimeout（函数（）{
//同样，如果窗口小于菜单，则显示mobile
如果（$（窗口）.width（）$（此）.width（）？maxWidth:$（此）.width（）；
});
$（“.menu项”）。每个（函数（）{
$（此）.width（最大宽度）；
});
}
功能移动菜单（）{
$（“.menu主菜单容器”）.css（“显示”、“无”）；
$（“#移动菜单”）.css（“显示”、“块”）；
}
功能显示菜单（）{
$（“#移动菜单”）.css（“显示”、“无”）；
$（“.menu主菜单容器”）.css（“显示”、“首字母”）；
}

以下是Html：

<ul>
    <li class="menu-item">Text</li>
    <li class="menu-item">More Text</li>
    <li class="menu-item">The longest Text</li>
</ul>

最后是JS脚本：

menuItem = $(".menu-item");
var maxWidth = -1;

$(document).ready(function() {
    menuItem.each(function() {
        maxWidth = Math.max(maxWidth, $(this).width());
    });

    alert('max width: ' + maxWidth);
});

这里还有一个JSFIDLE:

这里是Html：

<ul>
    <li class="menu-item">Text</li>
    <li class="menu-item">More Text</li>
    <li class="menu-item">The longest Text</li>
</ul>

最后是JS脚本：

menuItem = $(".menu-item");
var maxWidth = -1;

$(document).ready(function() {
    menuItem.each(function() {
        maxWidth = Math.max(maxWidth, $(this).width());
    });

    alert('max width: ' + maxWidth);
});

---

这里还有一个jsfiddle：

因为

菜单项

是

li

元素的类名，所以应该使用类选择器选择它们：

var menuItem = $(".menu-item");

---

请参见此处的修改代码，该代码打印282的

maxWidth

。

由于

菜单项

是

li

元素的类名，因此应使用类选择器选择它们：

var menuItem = $(".menu-item");

---

请参阅此处修改的代码，该代码打印282的

maxWidth

。

除非您定义了HTML标记

，否则

$（“菜单项”）

将无法正常工作。请参阅上的jQuery文档，了解如何使用它们检索所需的元素

由于您有

，因此需要使用

$（“.menu item”）

：

类选择器（“.Class”）
选择具有给定类的所有元素

---

除非定义了HTML标记

，否则

$（“菜单项”）

将无法正常工作。请参阅上的jQuery文档，了解如何使用它们检索所需的元素

由于您有

，因此需要使用

$（“.menu item”）

：

类选择器（“.Class”）
选择具有给定类的所有元素

错过了

-

$（“菜单项”）

中的类选择器。无需

加载

事件，请使用

就绪

。请参见$（“菜单项”）它是一个选择器，不是一个属性，您需要修改它，它看起来像此$（'.menu item'）或$（'#菜单项'）。请回答您的问题