Prototype.js 1.7 未捕获异常:语法错误，无法识别的表达式:[object HTMLInputElement] [英] Prototype.js 1.7 uncaught exception: Syntax error, unrecognized expression: [object HTMLInputElement]

问题描述

此代码适用于 Prototype.js 1.6，但自从升级到 1.7 后，我收到一个错误:未捕获的异常:语法错误，无法识别的表达式:[object HTMLInputElement]

This code worked for Prototype.js 1.6, but since upgrading to 1.7 i get an error: uncaught exception: Syntax error, unrecognized expression: [object HTMLInputElement]

document.observe('dom:loaded', function() {
    $$('.validate-length').each(function(elem) {
        var note = elem.next('.note');
        var counter = new Element('span');
        note.insert(counter);

        var curLen = $(elem).getValue().length;
        var maxLen = elem.className.match(/maximum-length-(\d+)/)[1];
        var count  = maxLen - curLen;

        if (curLen >= maxLen) {
            counter.update(' (-' + count + ')').setStyle({'color': 'red'});
        } else {
            counter.update(' (+' + count + ')').setStyle({'color': 'green'});
        }

        $$(elem).invoke('observe', 'keyup', function() {
            var curLen = $(elem).getValue().length;
            var count  = maxLen - curLen;
            if (curLen >= maxLen) {
                counter.update(' (-' + count + ')').setStyle({'color': 'red'});
            } else {
                counter.update(' (+' + count + ')').setStyle({'color': 'green'});
            }
        });
    });
});

这里似乎有问题:$$(elem).invoke('observe', 'keyup', function() {

感谢任何帮助.

推荐答案

当你在一个枚举器中，循环遍历一个集合时，你的实例变量 (elem) 是一个单一的对象，而不是一个集合.所以你想使用 elem.observe('keyup', function() { ... }); 来实例化你的观察者.

When you are inside an enumerator, looping over a collection, your instance variable (elem) is a singular object, not a collection. So you want to use elem.observe('keyup', function() { ... }); to instantiate your observer.

double-dollar"函数查找与作为其第一个参数传递的 CSS 选择器匹配的 DOM 元素集合.但是您已经在脚本的顶部完成了该操作，因此现在该集合的每个成员都已经找到"(并使用 Prototype 的所有方法进行了扩展)，并且不需要任何进一步的包装来执行操作.

The "double-dollar" function finds a collection of DOM elements that match the CSS selector passed as its first argument. But you've already done that at the top of the script, so now each member of that collection is already "found" (and extended with all of Prototype's methods), and does not need any further wrapping in order to be acted upon.

在这方面也有一些优化可供您使用.您应该创建一个函数来进行倒计时，也许使用 addMethods 工厂将其链接到输入的原型上，这样您就不需要为每个文本区域创建一个新的匿名函数.接下来，如果您在每个页面上有多个这样的输入，您可能需要查看延迟观察者"模式，以允许您为整个页面编写一个观察者，而不是为每个输入创建一个单独的观察者.

There's some optimizations available to you in this as well. You should create a single function to do the countdown, maybe using the addMethods factory to chain it on to the input's prototype, so you don't need to create a new anonymous function for each of your textareas. Next, if you have more than a very few of these inputs on each page, you might want to look at the "deferred observer" pattern to allow you to write one observer for the whole page, rather than creating a separate one for each input.

示例，根据要求:

Element.addMethods({
  // setup once, memoize the counter element and maxLen
  prepare_for_countdown: function(element){
    var elm = $(element);
    // even if you call it multiple times, it only works once
    if(!elm.retrieve('counter')){
      var counter = new Element('span');
      elm.next('.note').insert(counter);
      elm.store('counter', counter);
      var maxLen = elm.readAttribute('data-max-length');
      elm.store('maxLen', maxLen);
    }
    return elm; // so you can chain
  },
  // display the value, run once at load and on each observed keyup
  countdown: function(element){
    var elm = $(element);
    var curLen = elm.getValue().length;
    var maxLen = elm.retrieve('maxLen');
    var count  = maxLen - curLen;
    var counter = elm.retrieve('counter');
    if (curLen >= maxLen) {
      counter.update(' (' + count + ')').setStyle({'color': 'red'});
    } else {
      counter.update(' (+' + count + ')').setStyle({'color': 'green'});
    }
    return elm;
  }
});

// run setup and call countdown once outside of listener to initialize
$$('.validate-length').invoke('prepare_for_countdown').invoke('countdown');

// deferred listener, only responds to keyups that issue from a matching element
document.on('keyup', '.validate-length', function(evt, elm){
  elm.countdown();
});

这篇关于Prototype.js 1.7 未捕获异常:语法错误，无法识别的表达式:[object HTMLInputElement]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！