Question

尝试使用Ajax调用“ facebook like box ”时，我发现了一些奇怪的行为。

这个想法是让用户点击一个按钮。 Onclick，将使用.load()调用facebook插件并显示。 Onclick再次，内容将消失。

这样做的原因是在页面加载时减少HTTP请求。这是实现这一目标的最佳方式吗？

我编写的代码与调用天气页面的另一个函数完美配合。所以我认为它可能与facebook插件打破jquery / function有关？

这是我的JS小提琴代码; http://jsfiddle.net/aynzA/2/

您可以在我的网站页面上看到适用于“天气”的代码，r.adamtoms.co.uk

<style>.loader{background-color:red;margin: 30px 0;}</style>
    <ul>    
        <li class="facebook-f">
            <div class="footer-text">
                <a href="#" onclick="return false;">Facebook</a>
            </div>
            <div class="fb-loader-content"><br>loading wheel</div>
        </li>
    </ul>
    <div class="facebook-content" style="display: none;"></div>

    $(".facebook-f").click(function () {
        if (!$(".facebook-content").is(':visible')) {
            $('.fb-loader-content').addClass('loader');
            alert('class added')
            $('.facebook-content').load("http://www.google.com", function () {
            alert('loaded google, now remove loading wheel')
                $('.fb-loader-content').removeClass('loader');
            });
            $('.facebook-content').toggle();
        } else {
            $('.facebook-content').toggle();
        }
    });

真的很感激对此的一些反馈。请原谅我的天真，我是新手。

Answer 1

如果您在浏览器的控制台中查看您的网站，则会看到以下错误：

Uncaught SyntaxError: Unexpected identifier (index):62
Uncaught ReferenceError: FB is not defined core.js:66
Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
FB.getLoginStatus() called before calling FB.init(). all.js:56

我猜测“无效的应用ID”与其无效的原因有关。

Answer 2

好的，所以我找到了一个解决方法。我更改了：visible to：hidden并删除了style =“display：none;”来自facebook-content div。似乎完成了这项工作。

<ul>    
    <li class="facebook-f">
        <div class="footer-text">
            <a href="#" onclick="return false;"></a>
        </div>
        <div class="fb-loader-content"></div>
    </li>
</ul>
<div class="facebook-content"></div>

$(".facebook-f").click(function () {
    if (!$(".facebook-content").is(':hidden')) {
        $('.fb-loader-content').addClass('loader');
        alert('class added')
        $('.facebook-content').load("http://www.google.com", function () {
        alert('loaded google, now remove loading wheel')
            $('.fb-loader-content').removeClass('loader');
        });
        $('.facebook-content').toggle();
    } else {
        $('.facebook-content').toggle();
    }
});

Answer 3

使用@LowerClassOverflowian计数器方法和“闭包”我设法制作了有效的东西。

以下是代码：

var element = document.getElementById("facebook-f");

element.onclick = (function () { "use strict";

// init the count to 0
var count = 0;

return function(e) {
    //count
    count++;

if (count === 1) {    // do something on first click
    $('.fb-loader-content').addClass('loader');
    $('.facebook-content').load("templates/include/scripts/facebook.php", function () {
        $('.fb-loader-content').removeClass('loader');
    });
} 
if (count > 1) {
    $('.facebook-content').slideToggle(200);
}
};

}) ();

为每个帮助过的人欢呼。如果您有任何进一步的建议，请告诉我。

.load打电话给'facebook like box'打破了jquery

3 个答案: