0

次のスクリプトでは、HTML ドキュメントを div コンテナにロードして表示します。変数「x」を使用すると、ボタンをクリックするたびにドキュメントがリロードされることを回避できます。

コンテナを非表示にする機能は、私の質問とは関係がないため、ここにはありません。

x = 0;
$('.button').click(function () {
    if (x == 0){
        $('.box').load('article.html', function () {
            x = 1;
            $('.box').fadeIn();
        });
    }else{
        $('.box').fadeIn();
    }
});

私の質問は、別のドキュメントをロードするボタンがさらにある場合、スクリプトをどのように変更する必要があるかということです。

変数「x」は、すべてのボタンに対して個別に機能する必要があります。「this.variable」のようなものはありますか、それとも私が間違っているので、まったく別のものを考え出さなければなりませんか?

4

2 に答える 2

1

データ属性でロードするドキュメントを定義します。例えば：

<span class="button" data-doc="article.html">Load article</span>

それで：

$('.button').click(function(){
    var $this = $(this),
        $box = $('.box'),
        loaded = $this.data('loaded'),
        doc;

    if (loaded) { 
        $box.fadeIn();
        return; 
    }

    doc = $this.data('doc');

    $box.load(doc, function () {
        // mark it as being loaded
        $this.data('loaded', true);
        $box.fadeIn();
    });
});
于 2012-11-16T20:46:21.420 に答える
0

jQuery one() イベント ハンドラーを使用すると、イベント ハンドラーを 1 回だけ使用できます。

$('.button').one('click', function () {
    $('.box').load('article.html');
});
$('.button').click(function () {
   $('.box').fadeIn();
});
于 2012-11-16T21:31:04.640 に答える