1

我有一个使用 jQuery 的代码，它检查是否单击了正确的图像，然后根据答案是否正确将图像更改为红色或绿色。之后，它会等待 2 秒并重新加载页面以显示下一个图片对。单独使用它就可以正常工作，但是一旦我将其放入 facebook 应用程序中，它就无法正常工作。

在 IE 和 Firefox 中，它会在单击时更改颜色，但不会重新加载页面。然而，在 chrome 中，它甚至不会改变点击时的颜色。可能是 iframe 的问题还是什么？在 iframe 中使用 jQuery 时是否需要特定参数？

我的代码摘录如下所示：

jQuery(document).ready(function(){
   jQuery('img#0').live("click", function(){
        if (jQuery(this).hasClass("correct")){
            jQuery(this).attr('src', "0g.png");
        } else{
            jQuery(this).attr('src', "0r.png");
        }

    });
});

如您所见，我什至将 $ 更改为 jQuery 以防止与其他可能的库发生冲突。

有什么想法可以让它发挥作用吗？

4

3 回答 3

3

when you are running jquery inside of a facebook page or app you have to use https, including the link inside your html to your script file.

于 2012-10-16T18:19:51.170 回答
0

具有 id 的图像0是 HTML4 和 XHTML 中的无效 HTML 元素 id。它在 HTML5 中有效。这可能是您的DOCTYPE声明的问题。

如果更改 DOCTYPE 不能解决问题，您可以委托给图像点击事件。

// html
<div id="someElement">
   <img class="correct" />
</div>

// jquery
$("div#someElement").delegate("img", "click", function() {
   var correct = $(this).hasClass("correct");
   $(this).attr('src', (correct ? "0g.png" : "0r.png" ) );
});

jQuery.delegate()与该.live()函数类似，它将应用于当前和未来的元素。不同之处在于delegate() 将事件处理程序应用于父元素( someElement) 并监视来自子元素的冒泡事件。 live()监视文档顶部的这些冒泡事件，并且可能对性能更差。文档页面上有更多信息，这里有很多关于两者之间差异的讨论。

以下是 ID 属性规范的相关链接：

html5 规范
html4 规范
xhtml 指南
HTML 中 id 属性的有效值是什么？

于 2012-06-13T14:17:08.720 回答
0

好吧，这可能是有史以来最愚蠢的想法——但它对我有用。浏览网页时，JQuery 在 chrome 中的网页上加载良好 - 而不是在 Facebook 中。当我在 fb 应用程序的 chrome 中加载它时，它失败了。

IE 运行良好。我发现我链接到 http:// 而不是 https:// （记住一切都必须是安全的）。当我将其更改为 https:// 时，它工作正常。

于 2012-07-03T03:46:47.427 回答