jQuery 函数在 JavaScript for 循环中不起作用。请帮忙答案

【问题标题】：jQuery function doesn't work in a JavaScript for-loop. Please HelpjQuery 函数在 JavaScript for 循环中不起作用。请帮忙
【发布时间】：2011-04-20 22:25:48
【问题描述】：

我之前发布过这个问题的变体，就像我认为我已经得到它一样，它不再起作用了。

虽然我发现了问题，但没有答案。当我执行此代码时，它工作得很好：

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
    for (i=0;i<=5;i++) {
        for (j=0;j<3;j++) { 
            var $eqn = "ul.side-block-content li:eq("+i+") .article-title a span";  
        }
        $($eqn).replaceWith($titleMarquee+$(this).text()+"</marquee>");
    }

但是，一旦我输入 .mouseenter 之类的事件，它就会搞砸并停止工作：

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
    for (j=0;j<3;j++) { 
        var $eqn = "ul.side-block-content li:eq("+i+") .article-title a span";  
    }
    $($eqn).mouseenter(function(){
        $($eqn).replaceWith($titleMarquee+$(this).text()+"</marquee>");
    }); 
}

我发现还有什么奇怪的问题是 .event 和 .replaceWith 都有一个变量。如果我只是为 .mouseenter 分配一个变量并将 $(this) 用于 .replaceWith 它可以正常工作，但会限制我想要做的事情。我什至不能使用 ("+i+")。

这是我想用脚本实现的，但它不能以这种方式工作。请帮忙。

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
    for (j=0;j<3;j++) { 
        $("ul.side-block-content li:eq("+i+")").mouseenter(function(){
            $("ul.side-block-content li:eq("+i+") .article-title a span").replaceWith($titleMarquee+$(this).text()+"</marquee>");
        });   
    }
}

【问题讨论】：

我将从删除内部循环开始，并考虑使用所有 3 个元素的单一选择来分配该 mouseenver 事件。如果我理解正确的话……
这是marquee 吗？ o_O
注意你在哪里声明和使用变量。在第三个块中，您在事件处理程序中使用 i，但它更改为 6，因为它来自外部范围。

标签： javascript jquery events function for-loop

【解决方案1】：

不如这样：

$("ul.side-block-content li").mouseenter(function() {
    var $this = $(this);
    var $titleMarquee =
        $('<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"></marquee>');

    $(".article-title a span", $this)
        .replaceWith($titleMarquee.text($this.text()));
});

这是一个工作示例：http://jsfiddle.net/mXtmB/

如果您想限制li 元素，以便将事件应用于前6 个：

for (var i = 0; i <= 5; i++) {
    $("ul.side-block-content li:eq(" + i + ")").mouseenter(function() {
        var $this = $(this);
        var $titleMarquee =
        $('<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"></marquee>');

        $(".article-title a span", $this)
            .replaceWith($titleMarquee.text($this.text()));
    });
}

【讨论】：

这正是我所需要的。非常感谢。
@user713052：没问题，很高兴为您提供帮助:)

【解决方案2】：

我现在很难测试它，检查它是否有效。

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
var i, j; // important
for (i=0;i<=5;i++) {
    (function (i) {
        $("ul.side-block-content li:eq("+i+")").mouseenter(function(){
            $("ul.side-block-content li:eq("+i+") .article-title a span").replaceWith($titleMarquee+$(this).text()+"</marquee>");
        });   
    }(i));
}

我还删除了那个无意义的循环。

【讨论】：

【解决方案3】：

当您使用$eqn 变量访问元素时，您将访问最后一个元素，因为自从您连接事件后，该变量的值发生了变化。使用 this 关键字访问事件关联的元素：

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1">';
for (i=0;i<=5;i++) {
  $("ul.side-block-content li:eq("+i+") .article-title a span").mouseenter(function(){
    $(this).replaceWith($titleMarquee+$(this).text()+"</marquee>");
  });
}

【讨论】：