元素列表后缺少]

时间:2011-12-29 15:16:50

标签: javascript jquery

我正在使用像网页上的jquery脚本这样的咆哮,其中包含以下内容:

    template: function (title, message) {

        var e;

        e = [
            '<div>',
            '<div class="background">',
            '<div class="content">',
            '<h2>' + title + '</h2>',
            '<p>' + message + '</p>',
            '</div>',
            '</div>',
            '<span class="icon"></span>',
            '<span class="close"></span>',
            '</div>'
        ].join("");

        return e;
    }

由“this.element = $(this.options.template(title,message))”调用;“别处。

我在元素列表之后得到“Missing”错误但是列表似乎用“]”关闭了。


更新

与半结肠相关的建议解决方案不起作用。所以也许正如一些人所说的那样,这可能是另一回事。

我已在pastebin.com上粘贴了js文件。

顺便说一句,看到了期望的效果,并且一直如此。只是FireFox中的Firebug和Safari和Chrome中的Web Inspector都显示出与此相关的四个错误。

可能相关的一点是,在仔细观察时,我注意到错误直到“self.flash(”end“);”第86行被触发。

也许非常恰当的是整个flash事件是我添加到原始代码中的hack。


更新2

感谢下面的答案和评论,特别是“我不是我”,我已经开始了一些,但仍然需要一些帮助才能越过终点。

如果您参考我之前的更新和pastebin,事实证明问题似乎与“flash”功能有关。我更新了这个,如下所示:

flash: function (mode) {
    var self, delay, trailerDelay, interval, iterations, fadeMe;


    if (mode == "start") {
        trailerDelay = 5;
        interval = this.options.startFlashInterval;
        iterations = this.options.startFlashTimes * 2;
        delay = this.options.startFlashDelay + interval;
    } else {
        trailerDelay = this.options.endFlashDelay;
        interval = this.options.endFlashInterval;
        iterations = this.options.endFlashTimes * 2;
        delay = 5;
    }

    if (iterations < 2) {
        iterations = 2;
    }

    self = this;
    fadeMe = function () {
        self.element.animate({opacity: 'toggle'}, {duration: interval})
    };

    setTimeout(fadeMe, delay);
    setTimeout(fadeMe, interval);

    for(var i = 2; i < iterations; i++) {
        setTimeout(fadeMe, interval);
    }

    setTimeout(function() {var x = 1}, trailerDelay);

},

然而,虽然这摆脱了错误,但我也没有得到闪烁的效果。因此,fadeMe功能无效。我知道它被调用为使用出现的警报。我尝试了相同的结果的各种配置。会对此表示赞赏。


解决

需要一个单独的函数来处理setTimeout调用正在做的事情。

    toggle: function (interval, delay) {
        setTimeout(function() {}, delay);
        this.element.animate({opacity: 'toggle'}, {duration: interval});
    },

    flash: function (mode) {
        var delay, trailerDelay, interval, iterations, i;

        if (mode == "start") {
            trailerDelay = 5;
            interval = this.options.startFlashInterval;
            iterations = this.options.startFlashTimes * 2;
            delay = this.options.startFlashDelay + interval;
        } else {
            trailerDelay = this.options.endFlashDelay;
            interval = this.options.endFlashInterval;
            iterations = this.options.endFlashTimes * 2;
            delay = 5;
        }

        if (iterations < 2) {
            iterations = 2;
        }

        this.toggle(interval, delay);
        for(i = 1; i < iterations; i++) {
            this.toggle(interval, interval);
        }

        setTimeout(function() {}, trailerDelay);

    },

接受“我不是我的回答”。

5 个答案:

答案 0 :(得分:1)

关于您的更新以及导致错误的flash()函数,我看到的一个问题是您似乎将jQuery对象传递给setTimeout而不是函数

在您的pastebin的145-151行上,您有...

setTimeout(this.element.animate(this.options.hideStyle, {duration: interval}), delay);
setTimeout(this.element.animate(this.options.showStyle, {duration: interval}), interval);

for(var i = 0; i < iterations; i++) {
    setTimeout(this.element.animate(this.options.hideStyle, {duration: interval}), interval);
    setTimeout(this.element.animate(this.options.showStyle, {duration: interval}), interval);
}

你应该传递一个调用动画的function ......

setTimeout(function() {
    self.element.animate(self.options.hideStyle, {duration: interval});
}, delay);
setTimeout(function() {
    self.element.animate(self.options.showStyle, {duration: interval});
}, interval);

for(var i = 0; i < iterations; i++) {
    setTimeout(function() {
        self.element.animate(self.options.hideStyle, {duration: interval});
    }, interval);
    setTimeout(function() {
        self.element.animate(self.options.showStyle, {duration: interval});
    }, interval);
}

答案 1 :(得分:0)

你试过吗

template: function (title, message) {

    var e;

    e = ['<div>',
        '<div class="background">',
        '<div class="content">',
        '<h2>' + title + '</h2>',
        '<p>' + message + '</p>',
        '</div>',
        '</div>',
        '<span class="icon"></span>',
        '<span class="close"></span>',
        '</div>'].join("");

    return e;
}

答案 2 :(得分:0)

尝试识别该结构中的错误来源。

尝试

e = [
       '<div>'
].join("");

然后在[]中添加行,直到再现错误。

我怀疑原因是标题或信息。

答案 3 :(得分:0)

js引擎会自动插入分号;。因此,如果您尝试以下操作,它应该可以正常工作。

e = ['<div>',
    '<div class="background">',
    '<div class="content">',
    '<h2>' + title + '</h2>',
    '<p>' + message + '</p>',
    '</div>',
    '</div>',
    '<span class="icon"></span>',
    '<span class="close"></span>',
    '</div>'].join("");

实际上,只需在某些换行符处插入分号。例如,让我们考虑以下简单函数。

function myFunction()
{
    return 5;
}

在这种情况下会返回正确的5值,但如果您按如下方式修改此函数。

function myFunction()
{
    return
          5;
}

将返回undefine而不是返回值5(大多数其他语言不是这种情况),因为前面的函数对应于以下函数。

function myFunction()
{
    return;
          5;
}

后跟新行的return语句告诉JS解释器应该在return之后插入一个半冒号。但是,如果您按如下方式修改函数,它将返回正确的值5

function myFunction()
{
     return(
           5);
}

因为在这里我们用一个左括号(开始一个表达式。 JS知道我们在找到新行时处于表达式的中间,并且足够聪明,在这种情况下不会插入任何半冒号。

答案 4 :(得分:0)

尝试:

template: function (title, message) {

    var e;

    e = [
        '<div>',
        '<div class="background">',
        '<div class="content">',
        '<h2>' + title + '</h2>',
        '<p>' + message + '</p>',
        '</div>',
        '</div>',
        '<span class="icon"></span>',
        '<span class="close"></span>',
        '</div>'
    ];

    e = e.join("");

    return e;
}