jquery - 单击后如何更改选择器功能

Question

我正在尝试创建一些 jquery，它将允许用户单击 div 来发出 http 请求。除了显示/隐藏之外，主要目的是减少 http 请求，因为内容仅在用户请求时加载。

我的功能在下面并且似乎可以正常工作。但是我现在需要“循环”函数，或者创建另一个实例。

这样做的目的是让用户点击同一个 div 并隐藏内容。

我们非常欢迎任何关于更好的方法的想法或建议!

$(document).ready(function () {
    $('.windguru').click(function () {
        $('.loader').show(400, null, function () {
            alert('loader has been shown')
            $('.windguru-content').load("windguru1.html", function () {
                alert('iframe content loaded, will now close the loader')
                $('.loader').hide(500);
            });
        });
    });
});

这是 jsfiddle: http://jsfiddle.net/5CJ74/

Answer 1

一种简单的循环方式是在 DOM 元素上切换一个虚拟类。在您的情况下，您希望显示隐藏操作在点击 $('.windguru') 时循环，然后只需 $('.windguru').addClass('loaded') 当你得到 ajax 响应时 在点击 $('.windguru').hasClass('loaded') 时执行 $('.windguru').removeClass('loaded')。 所以它是这样的

1. 检查是否 $('.windguru').hasClass('loaded')
2. 如果没有，则 $('.windguru').addClass('loaded') 并执行其余的 ajax 加载
3. 如果是，则 $('.windguru').removeClass('loaded') 并隐藏内容。

你可以进一步改进，

• 缓存 jQuery 对象而不是每次都传递选择器
• 仅在第一次请求数据时使用ajax请求。