1

jquery/javascript のカウントダウンに少し問題があります。助けていただければ幸いです。

だから、私はセレクター（jqueryセレクター）と呼ばれる1つのパラメーターを持つタイマー関数を持っています..

function timer(selector) {
    self = $(selector);     
    var sec = parseInt(self.find('span.timeout').text());

    var interval = setInterval(function() {
    sec--;
    if (sec >= 0) {
        self.find('span.timeout').text(sec);
    } else {
        setInterval(interval);
    }
    }, 1000);

}

で、html私はこのようなものを持っています。

<div class="element" id="el1"><span class="timeout">10</span></div>
<div class="element" id="el2"><span class="timeout">10</span></div>

同じクラスで異なる ID を持つ複数の要素

関数の使用法は次のようになります。

$("body").on('click', '.element', function() {
timer(this);
});

最初のクリックで問題なく動作し、タイマーがカウントダウンします。しかし、同じクラスの 2 番目の div をクリックすると、最初のカウンターが停止し、2 番目は前の 2 番目から移動します。

js/jqueryを使用して同じページで複数のカウントダウンを行うにはどうすればよいですか?両方の要素をクリックすると、両方のタイマーが正常に動作しますか?

デモ: http://jsfiddle.net/zKTkj/

4

1 に答える 1

1
  • selfで宣言するのを忘れましたvar。その結果、selfグローバル変数になりました。2 番目のタイマーが作成されたときに、このグローバル (「共有」) 変数を上書きしていました。そのため、両方のタイマーが同時に 2 番目の要素に出力され、グリッチが発生しました。
  • あなたはおそらく意味しclearInterval(interval)た。

http://jsfiddle.net/zKTkj/1/

于 2012-06-04T14:54:37.023 に答える