jQuery函數在JavaScript for循環中不起作用。 請幫忙

Question

我之前已經發布了這個問題的變體，正如我認為的那樣，它不再起作用。

我雖然發現了問題，但沒有答案。 當我執行此代碼時，它可以正常工作：

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分配一個變量，並為$ .replaceWith使用$（this），它可以正常工作，但限制了我的工作范圍。 我什至不能使用（“ + 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>");
        });   
    }
}

Answer 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()));
    });
}

Answer 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));
}

我還刪除了無意義的循環。

Answer 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>");
  });
}