0

私はいくつかの動的コンテンツ更新スクリプトの作成に取り組んでおり、コードを特定のページの複数の関数に適用できるようにするためにチェーンできる jquery 関数を作成することにしました。ただし、これの一部がいくつかの問題を引き起こしたので、ここのより熟練した js 開発者の 1 人が私を助けてくれることを願っています。

基本的に、指定された要素のコンテンツを動的に更新する次の 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>​

問題は、このコードを1つの要素でのみ呼び出すと、期待する要素( http://jsfiddle.net/C6h8s/10/ )で正常に動作することです。ただし、2 つの要素で実行すると、2 番目の要素のみが更新されますが、4 つの文字列すべてが更新されます (この jsfiddle にリンクしますが、現時点では 2 つ以上のリンクを投稿することはできず、最初と最後がより重要です。お願いします。間違った機能を表示するには、2 番目の呼び出しのコメントを外してください)。問題は setInterval 関数にあるようです。その呼び出しを削除して両方の要素で関数を呼び出すと、両方の要素が適切に更新されますが、無期限にループすることがなくなったため、一度だけです。利用可能な文字列（http://jsfiddle.net/C6h8s/11/）。

この問題を回避する方法について、どなたでもご意見をお寄せいただければ幸いです。

4

1 に答える 1

2

この関数を 2 回目に呼び出すと、グローバルであるため が上書きされますid。使用var:

var id = .... ;

デモ

于 2012-06-05T20:30:14.210 に答える