Вопрос jQuery: как мне очистить этот код, чтобы сделать его более эффективным, или есть способ сделать это?

Question

Это мой код, и он повторяется до: eq (15). Я новичок в jQuery и JavaScript в целом, и я сомневаюсь, что я делаю это правильно. Может кто-нибудь помочь мне с очисткой этого кода в цикл, может быть? Мне в основном нужен этот скрипт для увеличения: eq (0) на 1 до 15.

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"><span>';

$("ul.side-block-content li:eq(0)").mouseenter(function(){$('ul.side-block-content li:eq(0) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(0) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(0)").mouseleave(function(){$('ul.side-block-content li:eq(0) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(0) .article-title a').text()+'</span>');});  

$("ul.side-block-content li:eq(1)").mouseenter(function(){$('ul.side-block-content li:eq(1) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(1) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(1)").mouseleave(function(){$('ul.side-block-content li:eq(1) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(1) .article-title a').text()+'</span>');});  

$("ul.side-block-content li:eq(2)").mouseenter(function(){$('ul.side-block-content li:eq(2) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(2) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(2)").mouseleave(function(){$('ul.side-block-content li:eq(2) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(2) .article-title a').text()+'</span>');});  

$("ul.side-block-content li:eq(3)").mouseenter(function(){$('ul.side-block-content li:eq(3) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(3) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(3)").mouseleave(function(){$('ul.side-block-content li:eq(3) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(3) .article-title a').text()+'</span>');});

$("ul.side-block-content li:eq(4)").mouseenter(function(){$('ul.side-block-content li:eq(4) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(4) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(4)").mouseleave(function(){$('ul.side-block-content li:eq(4) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(4) .article-title a').text()+'</span>');});

$("ul.side-block-content li:eq(5)").mouseenter(function(){$('ul.side-block-content li:eq(5) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(5) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(5)").mouseleave(function(){$('ul.side-block-content li:eq(5) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(5) .article-title a').text()+'</span>');});  

Заранее спасибо.

Answer 1

for (i = 1; i <= 15; i++) {
    $("ul.side-block-content li:eq(" + i + ")").mouseenter(function() {
        var $this = $(this);
        $this.filter('.article-title a span').replaceWith(
        $titleMarquee + $this.filter('.article-title a').text() + '</span></marquee>');
    }).mouseleave(function() {
        var $this = $(this)
        $this.filter('.article-title a marquee').replaceWith('<span>' + $this.filter('.article-title a').text() + '</span>');
    });
}

PS Я не уверен, что это будет работать - нужно увидеть ваш HTML.(Не знаю, что находится в $ titleMarquee и почему в первой замене нет открытия <span>)

Answer 2

Попробуйте это:

$('ul.side-block-content').delegate('li', 'mouseleave', function() {
    $a = $(this).find('.article-title a');
    $a.filter('span:first').replaceWith($titleMarquee + $a.text()
                                        + '</span></marquee>');
});

Answer 3

Похоже, что все эти операторы делают одно и то же, только с разными элементами списка. Предполагая, что это правильно, вы можете сделать это:

$("ul.side-block-content li").hover(
    function(){
        var link = $(this).find(".article-title a"),
            span = link.find("span");
        span.replacewith($titleMarquee + link.text() + '</span></marquee>');
    },
    function(){
        var link = $(this).find(".article-title a"),
            marquee = link.find("marquee");
        marquee.replaceWith('<span>' + link.text() + '</span>');
    }
);

hover является ярлыком для подключения функций к mouseenter и mouseleave. Внутри каждой функции this будет ссылаться на сам элемент li, поэтому, если мы поместим его в объект jQuery, мы можем использовать find для поиска его потомков. Похоже, вы работаете в основном с содержимым ссылки, поэтому код находит эту ссылку, затем находит либо span (на mouseenter), либо marquee (на mouseleave) и заменяет ее на marquee или span, содержащий текст ссылки.