Question

使用以下脚本，我将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”这样的东西，或者我错了，我必须想出一些完全不同的东西？

Answer 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();
    });
});

Answer 2

使用jQuery one（）事件处理程序，您只需使用一次事件处理程序。

$('.button').one('click', function () {
    $('.box').load('article.html');
});
$('.button').click(function () {
   $('.box').fadeIn();
});

jquery加载变量

2 个答案: