0

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

基本上我有以下 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/）。

任何人可能对如何解决此问题提出的任何意见将不胜感激。

4

1 回答 1

2

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

var id = .... ;

演示

于 2012-06-05T20:30:14.210 回答