Jquery，循环其他点击而不是第一次点击

Question

所以我有一些代码，其目的是使用 .load() 加载一个类似 facebook 的盒子。

代码的工作原理是:Onclick 检查是否隐藏。如果没有，则 .load 然后 .toggle。 Onclick 再次检查 div 是否可见，如果可见，则 .toggle 隐藏。

现在 div 已隐藏，它将再次运行代码的第一部分。我想阻止这种情况，并在第一次点击后运行 else 函数。

这怎么可能通过开关实现？

$(".facebook-f").click(function () {
"use strict";
if ($('.facebook-content').css('display') == 'none') {
    $('.fb-loader-content').addClass('loader');
    $('.facebook-content').load("http://www.google.com", function () {
        console.log('loader will be removed');
        $('.fb-loader-content').removeClass('loader');
    });
    $('.facebook-content').toggle();
} else {
    $('.facebook-content').toggle();
}

});

Here is a link to the jsfiddle .

Answer 1

使用计数器。因此在第一次点击后，它会将计数器更改为 2，从而导致 else 条件从现在开始运行。

$(".facebook-f").click(function () {
"use strict";
var counter = 1;  // added this
if ($('.facebook-content').css('display') == 'none' && counter === 1) {  // added another condition here
    $('.fb-loader-content').addClass('loader');
    $('.facebook-content').load("http://www.google.com", function () {
        console.log('loader will be removed');
        $('.fb-loader-content').removeClass('loader');
        counter += 1; // update the counter so it changes to 2 causing the else to run the next times
    });
    $('.facebook-content').toggle();
} else {
    $('.facebook-content').toggle();
}
});