将 getNext() 与 Mootools 一起使用答案

【问题标题】：Using getNext() with Mootools将 getNext() 与 Mootools 一起使用
【发布时间】：2025-12-13 10:25:01
【问题描述】：

我正在尝试在 mootools 1.11 中进行自动完成。一切正常，但我无法检查是否

this.selectel.getNext()

为 null 或其他。 Firebug 为每个元素输出 [li]，为不存在的元素输出 [null] i 通过 getNext();

我看到有些人只是在做：

if(this.selectel.getNext()) {...

但这在这里不起作用，因为我总是得到空对象。这里肯定发生了一些非常愚蠢的事情......

这里有一些解决问题的代码：

this.selectel = $$('ul.results').getFirst();

...

onCommand: function(e, mouse) {
    if (e.key && !e.shift) {

        switch (e.key) {
            case 'up':                  
                this.selectel.getPrevious().addClass('active');
                if(this.selectel) this.selectel.removeClass('active');
                this.selectel = this.selectel.getPrevious();
                e.stop(); 
            return;

            case 'down':
                var test = this.selectel.getNext();
                console.log(typeof(test));

                if(this.selectel.getNext() != null) {  // not working

                    this.selectel.getNext().addClass('active');
                    if(this.selectel) this.selectel.removeClass('active');
                    this.selectel = this.selectel.getNext();
                }
                e.stop(); 
            return;

        }
    }

【问题讨论】：

你在 typeof 测试输出中得到了什么？ console.log(this.selectel) 是您期望的元素吗？是甚至是this 指向类实例或窗口对象（取决于this.fireEvent("command") 的绑定方式 - this.fireEvent("command", this); ？）顺便说一句，这不是错误，而是：你不需要评估如果选择器直接为空，您可以只执行if (this.selectel.getNext()) { ... }，如果已定义，则评估为真，如果为空，则为假。 element.getNext() 也接受一个选择器，所以你可以这样做 .getNext("div.inactive")
这是类实例。就像我上面所说的 console.log(this.selectel) 输出 [null]。我也尝试过 (this.selectel.getNext()) { ... } 但我得到的不是 null 而是 [null]，一个我无法处理的 null 对象。
如果 this.selectel 输出 null 则此范围未绑定到类实例。如果它找不到元素，它肯定不会找到它旁边的元素。您需要向我展示发生fireEvent("command") 的课程本身（可能在keyup 或其他东西上）。 附言。你从来没有说过 this.selectel 是 null 但 this.selectel.getNext() - 但它是一个链，从原始元素开始并回复原始元素是对 dom 对象的正确引用
我猜你不明白。 this.selectel 在最后一个 li 元素上输出 [null] NOT null。上下自动完成结果工作正常。所以解析 UL 元素是有效的。只有最后一个 LI 元素会引起麻烦。当我得到下一个（不存在的）LI 元素的 [null] 时。
够公平的。 if (!this.selectEl.getNext()) { e.stop(); return;} .. code here that uses the getNext (cache it) 不起作用吗？如果为空，它将评估为假。如果一切都失败了，请在 jsfiddle 上发帖，我会看看...

标签： javascript mootools

【解决方案1】：

您正在调用 getNext() 两次。

替换这些行：

if(this.selectel.getNext() != null) {  // not working
   this.selectel.getNext().addClass('active');
   if(this.selectel) this.selectel.removeClass('active');
   this.selectel = this.selectel.getNext();
}

与：

if(el = this.selectel.getNext() != null) {  // not working
   el.addClass('active');
   if(this.selectel) this.selectel.removeClass('active');
   this.selectel = el;
}

【讨论】：

那不行。我试过这个没有成功： var test = this.selectel.getNext(); if(test != null) { test.addClass('active'); if(this.selectel) this.selectel.removeClass('active'); this.selectel = this.selectel.getNext(); }
他所建议的只是将选择器缓存到 el 中，这样您就不会调用它两次。需要 var el = 否则它会变成不可取的 window.el。
我已经将它存储到测试中（见上文）。但是 if(test != null) { ... 没有得到 null 而是 [null] 这不是假的。