Question

我有两个带有动态文本的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>

Answer 1

即使您将代码分隔为多个<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>

Answer 2

Seperate Script标签共享相同的变量

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

Answer 3

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

作为快速修复，您可以更改变量名称或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如果你必须学习编程语言。

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

3 个答案: