为什么这个变量没有定义?

Why is this variable undefined?

本文关键字：定义 变量 为什么      更新时间：2023-09-26

我试图在我维护的页面上扩展JavaScript，以便在加载页面的日历部分时应用一些格式。有一个名为InitCalendar(month)的现有函数，它在点击时加载该部分。

日历是以天的列表形式写的。我想根据每天的事件数量更改包含事件的<div>元素的高度。如果一天中有两个而不是一个事件，则每个事件都需要缩小以适应，等等。

所以预期的算法是:

  • 获取<li>的数组，日历中的天

  • 对于每个<li>，获取其包含的<div>元素的数组

  • 根据div数组的长度设置合适的高度

我的努力失败了，这个错误:"Uncaught TypeError: Cannot read property 'style' of undefined"

下面是我的代码:

function setHeights(n, string, elems) {
   // start at 1 to avoid the first element in the array.
   for (var i = 1; i <= n; i++) {
       var x = elems[i];
       x.style.height = string;
   };
};
function eventHeights() {
    var ls = $(".calendar").children().children();
    var n = ls.length;
    for (var i = 0; i < n; i++) {
        var divs = ls[i].children;
        switch (divs.length) {
        case 4:
            setHeights(4, "27px", divs);
        case 3:
            setHeights(3, "52px", divs);
        };
     };
};
function InitCalendar(month) 
{
    // ... Some preexisting code to load the calendar section ...
    eventHeights();
}

这是一个HTML片段，显示我正在使用的结构:

<div class="calendar">
  <ul>
    <li>
       <div>...</div>
       <div>...</div>
    </li>
    <li>
       <div>...</div>
    </li>
    <li>
       <div>...</div>
       <div>...</div>
       <div>...</div>
       <div>...</div>
    </li>
  </ul>
</div>

帮助解决这个问题非常感谢!

JavaScript数组是基于0的，因此setHeights中的for循环是不正确的。注意i赋值的变化，以及条件

中从<=到<的变化。
for (var i = 0; i < n; i++)
{
    var x = elems[i];
    x.style.height = string;
}

数组的索引是从0到length-1，而不是从1到length。在eventHeights你做得对，但在setHeight，索引是错误的。

我想你的:

function setHeights(n, string, elems) {
   for (var i = 1; i <= n; i++) {
       var x = elems[i];
       x.style.height = string;
   };
};

n是长度，假设长度为4，你从1迭代到4,4是一个无效的索引，因为它们是从0开始的。应该是0到3，所以试着把它改成:

function setHeights(n, string, elems) {
   for (var i = 0; i < n; i++) {
       var x = elems[i];
       x.style.height = string;
   };
};

我想你可能想:

for (var i = 0; i < n; i++) {

循环遍历一个从0开始的数组

这段代码还有另一个问题，虽然它不是错误消息的原因，但它使调试变得非常残酷。我的switch语句在其case条目中缺少break语句。因此，即使i<=n的错误修复，我的代码将迭代长度4数组，设置高度为27像素，然后移动到case 3:，设置第二个和第三个div高度为52像素。

完全不是我想要的，而且引起了很多混乱。

相关文章：