这是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 :)");
}
});
});
您需要向.post-content
元素提供一个background-color
。
该插件在#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
元素时确实存在选择器问题。
这里的问题是获取内容的方式。
jQuery(this).next().find(".post-content-back"),
这将返回下一个元素(即.post-content back),然后查找一个包含.post-con内容类的元素。然后返回jQuery对象本身,而不是内容。
以下是您真正想要的:
jQuery(this).next(".post-content-back").html();
然而,在初始化flippy插件并将其存储在变量中之前,最好先获取内容。
下面是一个工作示例-http://jsfiddle.net/SqD6x/