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>

このフリッピープラグインを使用して前面と背面のビューを反転していますが、何らかの理由で機能しません。

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-color要素に aを指定する必要があり.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));

changeColor(colorHex,step)そして、色の 16 進値を想定している 441 行目の関数を呼び出します。rgba(0, 0, 0, 0)16 進文字列を指定しないと、スクリプトがエラーで赤、緑、青の 16 進値を抽出しようとすると爆発します。Uncaught ReferenceError: g is not defined

この関数はgb、赤、 a(緑、0,青として使用しようとします。

デモを追加しましたが、これは非常にローカライズされた質問であるため、この回答ですべてのコードをインライン化するメリットはないと思います。

要素を見つけるセレクターの問題があるため、@ tomarshallの回答も非常に関連性があります.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();

ただし、フリッピー プラグインを初期化して変数に格納する前に、コンテンツを取得することをお勧めします。

これが実際の例です - http://jsfiddle.net/SqD6x/

于 2012-09-07T10:59:20.633 に答える