Question

我正在创建一些动态内容更新脚本，并决定创建一个可以链接的jquery函数，以便能够将我的代码应用于给定页面中的多个函数。然而，其中一部分产生了一些问题，我希望其中一位技术娴熟的开发人员可以帮助我。

基本上我有以下JS代码，它们将动态更新指定元素中的内容。

$.fn.updatecontent = function(vars){
    id=$(this).children(":first").attr("id");
    var i=0;
    change_contents = function(){
        $("#"+id).fadeOut('slow', function(){
            $(this).html(vars.data[i]);
            $(this).fadeIn('slow');
        });
        if(i+1 < vars.data.length){
            i++;                
        }else{
            i=0;
        }
    };
    setInterval(change_contents,vars.interval);
};

$(document).ready(function(){
    $("#button_one").updatecontent({
        interval: 5000,
        data: ["button 1 main content", "button 1 secondary content"]                            
    });   
    $("#button_two").updatecontent({
        interval: 7000,
        data: ["button 2 main content", "button 2 secondary content"]                            
    });             
});

我的演示html看起来像这样

<section id="main_panel">
    <section id="button_one" class="button">
        <div id="button_one_content">button 1 main content</div>
    </section>
    <section id="button_two" class="button">
        <div id="button_two_content">button 1 main content</div>
    </section>
</section>

问题是，如果我在一个元素上调用此代码，只能在我期望的元素（http://jsfiddle.net/C6h8s/10/）上正常工作。但是，如果我在两个元素上运行它，那么它只更新第二个元素，但是所有4个字符串（我会链接到这个jsfiddle，但我不能发布两个以上的链接，第一个和最后一个更重要。请取消注释第二次调用以查看错误的功能）。问题似乎是setInterval函数，因为如果我删除了对它的调用并在两个元素上调用函数，它将适当地更新这两个元素，尽管只有一次，因为我不再使它无限循环在可用字符串（http://jsfiddle.net/C6h8s/11/）上。

任何人可能对如何解决这个问题的任何输入将不胜感激。

Answer 1

第二次调用该函数时，它会覆盖id，因为它是全局的。使用var：

var id = .... ;

DEMO

在同时调用的函数中的JS setInterval导致更新错误的元素

1 个答案: