Javascript divs中的动态文本-如何使两者在同一页面上工作？

我有两个带有动态文本的DIV标签（可能更多）。我需要他们循环。我让它和一个DIV标签一起工作。但当我对第二个DIV标记应用相同的脚本时，只有一个有效

如何让两者同时在同一页上工作

 <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>

var text=['foo'，'bar'，'baz']；
i=0，
$div=$（“#DIV1”）；
setInterval（函数（）
{
$div.fadeOut（函数（）
{
$div.text（text[i++%text.length]）.fadeIn（）；
});
}, 1000);
var text=['foo'，'bar'，'baz']；
i=0，
$div=$（“#DIV2”）；
setInterval（函数（）
{
$div.fadeOut（函数（）
{
$div.text（text[i++%text.length]）.fadeIn（）；
});
}, 1000);

单独的脚本标记共享相同的变量

<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>

var text1=['foo'，'bar'，'baz']；
var i1=0，
var text2=['foo'，'bar'，'baz']；
var i2=0，
$（文档）.ready（函数（）
{
setInterval（函数（）{
$（“#DIV1”）.fadeOut（函数（）
{
$（“#DIV1”）.text（text[i1++%text1.length]）.fadeIn（）；
});
}, 1000);
setInterval（函数（）{
$（“#DIV2”）.fadeOut（函数（）
{
$（“#DIV2”）.text（text[i2++%text2.length]）.fadeIn（）；
});
}, 1000);
});

即使您在多个

标记中分离代码，所有标记的全局范围始终相同（就像所有代码都在同一个标记中一样）。因此，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>

var text=['foo'，'bar'，'baz']；
i=0，
$divs=$（“#DIV1，#DIV2”）；
setInterval（函数（）
{
$divs.fadeOut（函数（）{
$（this.text（text[i++%text.length]）.fadeIn（）；
});
}, 1000);

单个页面中的所有脚本块和脚本文件共享其全局变量-第二个块中的变量覆盖第一个块中的变量

作为一个快速解决方案，您可以更改变量名称或函数中的变量，确保使用

var

关键字声明每个变量（这样它就不是全局变量）：

然后为要影响的页面的每个元素调用函数作为

doInterestingFadeEffect（['foo'，'bar'，'baz']，$（'#DIV1'））

。使用jQuery方法应该可以更好地做到这一点，例如-您应该通读jQuery文档，这将帮助您了解详细信息

然而，如果必须学习编程语言，最重要的是了解JavaScript本身（而不是专门关注jQuery，许多可用的JS库之一）

<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>

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

var i = 0;

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

}
</script>