javascript - jquery，如何检查类是否已加载。然后更改功能以在第一次单击后隐藏

Question

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

我的功能在下面并且似乎可以正常工作。但是我现在需要“循环”这个函数，或者做一个 if 语句？

这样做的目的是允许用户点击同一个div来显示和隐藏内容。

$(document).ready(function () {
    $('.windguru').click(function () {
        $('.loader-content').addClass('loader')
        alert('loader has been shown')
        $('.windguru-content').load("http://adamtoms.co.uk/site/windguru1.html", function () {
            alert('windguru content loaded, now remove loader')
            $('.loader-content').removeClass('loader')
            alert('now i want to click windguru and hide the content/loop the function')
        });
    });
});

我的 if 语句:

$(".windguru").click(function() {


if ($(.windguru-content).val() = 0) {

    $(document).ready(function () {
    $('.windguru').click(function () {
        $('.loader-content').addClass('loader')
        alert('loader has been shown')
        $('.windguru-content').load("site/windguru1.html", function () {
            alert('windguru content loaded, now remove loader')
            $('.loader-content').removeClass('loader')
        });
    });
});

}


// Else if the value is anything else
else {
    $(.windguru-content).hide();
}

});

这是一个 Jsfiddle，http://jsfiddle.net/CeKKx/2/

任何想法/帮助将不胜感激!非常感谢，亚当

Answer 1

在选择器和 .length 两边使用引号，而不是 .val

if ($(".windguru-content").length) {

代替

if ($(.windguru-content).val() = 0) {

另外，在你的else中写

$(".windguru-content").hide();

在第一次加载时，使用 css 隐藏它。

.windguru-content {
    display:none;
}

完整代码:

$(".windguru").click(function () {
    if (!$(".windguru-content").is(':visible')) {
        $('.loader-content').addClass('loader');
        alert('loader has been shown')
        $('.windguru-content').load("site/windguru1.html", function () {
            alert('windguru content loaded, now remove loader');
            $('.loader-content').removeClass('loader');
        });
        $('.windguru-content').toggle();
    } else {
        $('.windguru-content').toggle();
    }
});