jquery - jquery加载变量

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