divs中的動態文本 - 如何讓兩者在同一頁面上工作？

我有兩個DIV標籤（也許更多）與動態文本。我需要他們循環循環。我得到它與一個DIV標籤工作。但是當我將相同的腳本應用到第二個DIV標籤時，只有一個可以工作。divs中的動態文本 - 如何讓兩者在同一頁面上工作？

我該如何在同一頁面同時工作？

<script type="text/javascript"> 
var text = ['foo', 'bar', 'baz']; 
i = 0, 
$div = $('#DIV1'); 

setInterval(function() 
{ 
$div.fadeOut(function() 
{ 
    $div.text(text[i++ % text.length]).fadeIn(); 
}); 
}, 1000); 
</script> 

<script type="text/javascript"> 
var text = ['foo', 'bar', 'baz']; 
i = 0, 
$div = $('#DIV2'); 

setInterval(function() 
{ 
$div.fadeOut(function() 
{ 
    $div.text(text[i++ % text.length]).fadeIn(); 
}); 
}, 1000); 
</script>

來源

2011-04-12 Erik

單獨的腳本標記共享相同的變量

<script type="text/javascript"> 
    var text1 = ['foo', 'bar', 'baz']; 
    var i1 = 0, 

    var text2 = ['foo', 'bar', 'baz']; 
    var i2 = 0, 
    $(document).ready(function() 
    { 
     setInterval(function(){ 
       $("#DIV1").fadeOut(function() 
      { 
       $("#DIV1").text(text[i1++ % text1.length]).fadeIn(); 
      }); 
     }, 1000); 

     setInterval(function(){ 
      $("#DIV2").fadeOut(function() 
      { 
       $("#DIV2").text(text[i2++ % text2.length]).fadeIn(); 
      }); 
     }, 1000); 
    }); 
</script>

來源

2011-04-12 00:45:52

即使你在多個<script>標籤分開你的代碼，它總是對所有的標籤相同的全球範圍內（好像所有的代碼是在相同的標籤）。因此來自tag2的$div將從tag1覆蓋$div，並且該效果將僅應用於一個div。

可以結合兩種：

<script type="text/javascript"> 

    var text = ['foo', 'bar', 'baz']; 
    i = 0, 
    $divs = $('#DIV1, #DIV2'); 

    setInterval(function() 
    { 
     $divs.fadeOut(function(){ 
         $(this).text(text[i++ % text.length]).fadeIn(); 
        }); 
    }, 1000); 

</script>

來源

2011-04-12 00:48:10 manji

所有腳本塊和腳本文件到一個頁面中分享他們的全局變量—從第二塊中的變量覆蓋那些從第一。

作爲速戰速決，你既可以改變函數內的變量名稱或enclose變量，確保您聲明與var關鍵詞的每個變量（這樣是不是還在全球）：

<script> 
$(function() { // wait until the page is ready - $(is short for $(document).ready(

var text = ['foo', 'bar', 'baz']; 
var i = 0, $div = $('#DIV1'); 

setInterval(function() 
{ 
$div.fadeOut(function() 
{ 
    $div.text(text[i++ % text.length]).fadeIn(); 
}); 
}, 1000); 

}); 
</script>

真的，你應該把這個結果函數，給它一個名稱，並text和$div參數：

<script> 
function doInterestingFadeEffect(text, $div) { 

var i = 0; 

setInterval(function() 
{ 
$div.fadeOut(function() 
{ 
    $div.text(text[i++ % text.length]).fadeIn(); 
}); 
}, 1000); 

} 
</script>

然後調用功能doInterestingFadeEffect(['foo', 'bar', 'baz'], $('#DIV1'))爲您想要影響的頁面的每個元素。應該可以使用jQuery方法更好地執行此操作，例如.each() —您應該閱讀jQuery文檔，這將幫助您瞭解詳細信息。

但是，最重要的是要知道JavaScript本身（而不是專注於jQuery，許多可用的JS庫之一）— read a book如果你必須學習編程語言。

來源

2011-04-12 00:57:18 PleaseStand

divs中的動態文本 - 如何讓兩者在同一頁面上工作？

回答

相關問題