1. 首页
  2. 问答
  3. jQuery问题：如何清理此代码以使其更有效，或者是否有办法循环此代码？

jQuery问题：如何清理此代码以使其更有效，或者是否有办法循环此代码？

2011-04-18 63 views
-1

这是我的代码，它不断重复，直到：eq（15）。我对jQuery和JavaScript一般都陌生，我怀疑我正确地做了这件事。任何人都可以帮助我将这些代码清理成一个循环吗？我基本上需要这个脚本增加：eq（0）1到15。jQuery问题：如何清理此代码以使其更有效，或者是否有办法循环此代码？

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

在此先感谢。

来源

2011-04-18 Alon

+0

您能否给一些HTML一起工作呢？ – 2011-04-18 07:47:36

+2

''。你先生是_devil_。 – Raynos 2011-04-18 08:01:27

+0

我以为很久以前就被弃用了。 – Krule 2011-04-18 08:12:24

回答

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

P.S.我不确定这会起作用 - 需要查看您的HTML。 （不知道在$ titleMarquee中是什么，为什么在第一个替换中没有开放<span>）

来源

2011-04-18 07:40:01

+1

*“P.S。一段时间后我会发布整个代码”*嗯，好吧。所以基本上你只是想确保你有第一个答案？因为你所遗漏的是回答这个问题。 – 2011-04-18 07:49:53

+0

非常快，谢谢！ $ titleMarquee是这样的：var $ titleMarquee ='';我应该用什么取代$这个？或者使用它，因为它看起来不起作用。 – Alon 2011-04-18 08:01:10

+1

@Innuendo：你不是真的想创建一个名为'$ this'的全局变量，是吗？ – 2011-04-18 08:05:14

0

看起来所有这些语句都做同样的事情，只是为了不同的列表项目。假设是正确的，你可以这样做：

$("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，其中包含链接文本。

来源

2011-04-18 07:58:41

0

试试这个：

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

来源

2011-04-18 07:58:48

相关问题

 相关问题