jquery加载变量答案

【问题标题】：jquery load with variablejquery加载变量
【发布时间】：2012-11-16 20:40:34
【问题描述】：

通过以下脚本，我将 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”这样的东西，还是我错了，我必须想出完全不同的东西？

【问题讨论】：

标签： jquery jquery-load

【解决方案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();
    });
});

【讨论】：

感谢您的解决方案。到目前为止，我从未使用过 data 属性。
不客气！我发现它非常方便。 jQuery 甚至会反序列化您放入其中的 json (example)。

【解决方案2】：

使用 jQuery one() 事件处理程序你只使用一次事件处理程序。

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

【讨论】：

不知道 jquery 中有 one()。这很有趣，但我认为这不是正确的选择，因为在单击另一个按钮并且框包含其他内容后，我将无法再次加载按钮 1 的内容。