Question

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

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

所以预期的算法是：

获取<li>的数组，即日历中的日期。
对于每个<li>，获取其中包含的<div>元素数组
根据div数组的长度设置合适的高度。

我的努力失败了这个错误：“未捕获的TypeError：无法读取未定义的属性'样式'”

这是我的代码：

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>

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

Answer 1

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

Answer 2

JavaScript数组基于0，因此setHeights中的for循环不正确。请注意条件中i分配的变化以及<=到<的变化：

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

Answer 3

我认为你的错误：

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;
   };
};

Answer 4

我想你可能想要：

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

它循环遍历一个从零开始的数组。

Answer 5

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

完全不是我想要的，以及造成很多混乱的原因。

为什么这个变量未定义？

5 个答案: