Функция jQuery не работает в цикле JavaScript. Пожалуйста помоги - PullRequest
Новая
       5

Функция jQuery не работает в цикле JavaScript. Пожалуйста помоги

0 голосов
/ 21 апреля 2011

Я уже публиковал варианты этого вопроса, и, как мне кажется, я понял, что он больше не работает.

Я понял проблему, но ответа не получил.Когда я выполняю этот код, он работает просто отлично: 

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) для .replace, она работает нормально, но ограничивает меня в том, что я хочу делать.Я даже не могу использовать ("+ 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 ]

1 голос
/ 21 апреля 2011

Как насчет чего-то вроде этого: 

$("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()));
    });
}
0 голосов
/ 21 апреля 2011

Когда вы используете переменную $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>");
  });
}
0 голосов
/ 21 апреля 2011

Мне трудно сейчас это проверить, проверьте, работает ли это. 

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

Я также удалил этот бессмысленный цикл.

...