2

这是 HTML

<article class="post">
    <div class="post-inner">
        <div class="post-content">
            // stuff here   
            <button class="order">Order</button>
        </div>
        <div class="post-content-back">
            // stuff here
            <button class="back">Back</button>
        </div><!-- / .post-back -->
    </div>
</article>

我正在使用这个Flippy 插件来翻转前后视图，但由于某种我无法理解的原因，它不起作用：

jQuery(".post .order").bind("click",function(e){
    e.preventDefault();
    jQuery(this).parents(".post-content").flippy({
        content:jQuery(this).next().find(".post-content-back"),
        direction:"LEFT",
        duration:"750",
        onStart:function(){
            alert("Let's flip");
        },
        onFinish:function(){
            alert("ok, it's flipped :)");
        }
    });
});
4

2 回答 2

3

您需要为元素提供background-colora .post-content。

该插件在 #217 行执行此操作

_Color = convertColor($this.css("background-color"));

它正在抓取该background-color属性，如果未提供该属性，则默认为rgba(0, 0, 0, 0)（在 Chrome 上它对我有用）

当翻转第 312 行时，使用这样的颜色字符串：

ctx.fillStyle = (_Ang > 90) ? changeColor(_Color_target,Math.floor(Math.sin(rad)*_Light)) : changeColor(_Color,-Math.floor(Math.sin(rad)*_Light));

并在 #441 行调用changeColor(colorHex,step)函数，该函数期望颜色的十六进制值。不提供十六进制字符串会导致脚本在尝试从rgba(0, 0, 0, 0)错误中提取红色、绿色、蓝色的十六进制值时爆炸Uncaught ReferenceError: g is not defined

该函数尝试使用gb红色、 a(绿色和0,蓝色。

添加了一个演示，但这是一个相当本地化的问题，所以我认为在这个答案中内联所有代码没有好处。

@tommarshall 的回答也非常相关，因为您在查找.post-content-back元素时遇到了选择器问题。

于 2012-09-07T12:51:54.233 回答
2

这里的问题是您获取内容的方式。

jQuery(this).next().find(".post-content-back"),

这将返回下一个元素（即 .post-content-back），然后查找其中包含 .post-content-back 类的元素。然后你返回的是 jQuery 对象本身而不是内容。

这是你真正想要的：

jQuery(this).next(".post-content-back").html();

但是，最好在初始化 Flippy 插件并将其存储在变量中之前获取内容。

这是一个工作示例 - http://jsfiddle.net/SqD6x/

于 2012-09-07T10:59:20.633 回答