翻转 JQuery 插件不起作用答案

【问题标题】：Flip JQuery plugin not working翻转 JQuery 插件不起作用
【发布时间】：2012-02-14 06:11:06
【问题描述】：

我正在为一个项目创建一个网站，我发现并决定使用 jquery flip plugin，但它不起作用......我确实设法让它在一段时间前工作，但从那以后就不能了。请记住，我还没有制作网站的 grafic 部分，所以这里的内容只是为了展示。

Here's网站源代码。

没有错误，只是不工作（翻转所述框）。正如我所说，它以前可以工作，但是当我添加其他那些框时，它就停止工作了。

【问题讨论】：

“它不工作”不是很具有描述性。你有任何错误吗？你检查过控制台吗？
在什么情况下它不起作用？您应该尝试提供小提琴 (jsfiddle.net) 而不是 pastebin，以便人们更容易帮助您。此外，在您的代码中，您包含两次翻转插件 js 文件 - 尝试删除其中一个，看看是否有帮助。

标签： javascript jquery plugins flip

【解决方案1】：

在 Flip 插件之前包含 jQuery UI。由于 Flip 插件需要 jQuery UI 可用，因此它可能会在不可用时失败。

使用插件文档网站上的演示作为模板总是一个好主意。翻转插件按此顺序包含 JS 文件：

    <script src="/lab/flip/js/jquery-ui-1.7.2.custom.min.js"></script>
    <script src="/lab/flip/js/jquery.flip.min.js"></script>

另外，在您的 JSFiddle 中，您必须使用绝对 URL 来获取资源，JSFiddle 不会神奇地找到 jquery/jquery.flip.min.js。

这是您的 JSFiddle 的更新版本，我从插件文档中获取了上述文件：http://jsfiddle.net/mNQJB/2/

如果上述方法未能解决您的问题，则说明您的代码存在错误，.flip 调用之一的content 属性无效：

Uncaught SyntaxError: Unexpected token .

确保您的 content 属性都在一行上，或者您已正确转义了结束行字符。

更新

为了在 JS 中转义结束行字符，我们这样做：

var str = "This is a string and \
I want it to use two lines.";

注意反斜杠，它是标准的转义字符。现在，如果您想创建一个将通过 HTML 呈现的新行，那么您应该使用 <br /> 标签：

var str = "This is a string and <br />I want it to use two lines.";

【讨论】：

刚刚改了，更新了我的fiddle，还是不行。
@HolyThunderz 你看到我的 jsfiddle 了吗？这是您的更新版本（并且有效）。你遇到的主要问题是你有一个字符串，它有一个没有转义的结束行字符，它阻止了 JS 的执行。
@HolyThunderz 附带说明一下，这确实输出了一个错误，您可以使用开发人员工具捕获该错误。如果您不使用控制台，那么我建议您习惯这样做，它将为您节省大量调试时间。大多数浏览器都允许您通过按 F12 打开开发者工具。
哦，非常感谢！在不删除该部分的情况下，我该怎么做才能使其工作？我不应该删减文本。
@HolyThunderz 好吧，如果你想在 HTML 中强制换行，那么使用 <br /> 标记，如果你想使用结束行字符，那么用 `` 转义它。我将在我的答案中添加一个简单的示例。

【解决方案2】：

you have an unterminated string constant in this section:

 $("#aimsb").bind("click",function(){
        $("#aims").flip({
            direction: 'bt',
            color: '#39AB3E',
            content: 'The aims of the GSP (Global Student Project) are to give students from all around the world both a culturally and personally enriching experience, as well as equal learning, and subsquently job opportunities
            .'
        });
    });

注意.'之前的换行

【讨论】：

注意：这是为了明确界定 Jasper 提供的答案 - 这是正确的答案，这只是添加细节。
细节也不错，我本来打算发这个的，但你抢先了！