1

我有一个脚本，它给我以下错误：' TypeError: clickables[ic] is undefined ' 当我用 Firebug/in 浏览器控制台检查它时。我是一个 javascript 初学者，正在尝试学习如何用 vanilla javascript 做事，所以我正在专门寻找一个解决方案。

问题：如何摆脱/消除未定义的 TypeError？

脚本应该做什么：

我正在使用它来显示隐藏元素，其显示属性设置为无。该脚本应该获取文档.item-reveal中特定类的所有实例，并将其与具有该类的每个项目都给出的唯一 ID 连接起来，以形成一个新类以通过getElementsByClassName进行搜索。带有.item-reveal的项目类是被点击的项目，未隐藏/显示的项目具有 .ID-reveal-item 类（可点击元素的唯一 ID，后跟 .item-reveal 类名，为了简单的约定）。ID根本不用于stying，它只是基于可以应用于任何一对元素的命名约定创建一个唯一的类：一个被点击的，一个通过创建/更改取消隐藏/隐藏显示属性的样式。

脚本的作用：

目前，该脚本实际上会在单击时显示项目，并在后续单击时再次隐藏它们，并且它适用于多个项目。所以，它基本上是有效的。我只是无法弄清楚' TypeError: clickables[ic] is undefined ' 问题以及如何摆脱它。使用开发人员工具时，我可以在多个浏览器中获得它。

该脚本是对自动执行匿名函数之类的尝试，所以我知道约定有点不同，但我想坚持下去，这样我就可以将它应用于未来的其他用途。启发它的文章可在此处找到：

http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write

例子：

HTML

<!-- Item to be clicked, with unique ID -->
<h3 class="item-reveal" id="plan-1">Click for special pricing!</h3>

<p>An introductory paragraph...</p>

<!-- Hidden item to be revealed, will always have a unique class -->
<p class="plan-1-reveal-item">Special, this month only: $49.99</p>

<h3 class="item-reveal" id="plan-b">Click for special pricing!</h3>
<p>An introductory paragraph...</p>
<p class="plan-b-reveal-item">Special, this month only: $29.99</p>

CSS

/* Init - hide/unhide onclicks */
.item-reveal                {cursor:pointer;}
[class$="-reveal-item"]     {display:none;}
/* Halt - hide/unhide onclicks */

javascript:

var clickables = document.querySelectorAll('.item-reveal');
var clickCount = clickables.length;
(function () {
    var Reveal = {
        swapThis: function () {
            for (var ic = 0; ic <= clickCount; ic += 1) {
                // Next line seems to create the error message.
                clickables[ic].onclick = function (unhideHide) {
                    var hidden = this.id;
                    var findClass = hidden += '-reveal-item';
                    var revealSwap = document.getElementsByClassName(findClass);
                    for (rn = 0; rn < revealSwap.length; rn++) {
                        revealSwap[rn].style.display = (revealSwap[rn].style.display == 'block') ? 'none' : 'block';
                    }
                }
            }
        }
    }
    Reveal.swapThis();
}) ();

该脚本通过 SCRIPT 标记链接，就在结束 BODY 标记之前。我已经尝试使用 Async 和 Defer 属性，在 HTML 文档中使用和不使用其他脚本，结果是一样的。我尝试添加一个事件处理程序以确保它不是仍在进行的 DOM 加载，但我不确定如何真正测试它以查看它是否真的在做任何事情。单元测试是我刚刚开始尝试熟悉的东西。

在一个完全不相关的行业工作了几年后，我正在努力清理技能，所以去年一直在追赶 Web 开发技术，学习响应式设计和 HTML5 数据，并尝试学习 javascript。我已经搜索、阅读和购买了几本电子书/书籍，这是我遇到的少数几次我无法弄清楚的事情之一。我想这对于具有正式编程/脚本知识的人来说可能是简单而明显的事情，但我是电子商务专业的，并且网络、营销、服务器/系统支持、布线、HTML/CSS 等都是我感到舒服的地方。非常感谢任何帮助，但请记住，我正在尝试在没有 jQuery 的环境/项目中实现这一点，可以选择。谢谢！

4

1 回答 1

0

您将通过以下方式离开列表的末尾：

for (var ic = 0; ic <= clickCount; ic += 1)

将其更改为：

for (var ic = 0; ic < clickCount; ic += 1)

clickCount是列表的长度，因此由于它是基于 0 的索引，clickables[clickCount - 1]因此是列表中的最后一个元素。您试图访问clickables[clickCount]不存在的。

于 2015-02-27T02:20:34.420 回答