1. 首頁
  2. 問答
  3. jQuery問題：如何清理此代碼以使其更有效，或者是否有辦法循環此代碼？

jQuery問題：如何清理此代碼以使其更有效，或者是否有辦法循環此代碼？

2011-04-18 77 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

相關問題

 相關問題