2

次のように、Fancybox ボックスを開くためのリンクがあります。

<a class="fancybox" rel="gallery" href="<?php echo $image_src; ?>" data-id="<?php echo $post->ID; ?>">

リンクには、上記のように が設定されdataた属性がありますid。Fancybox ヘルパー関数内でデータ属性を使用できるようにしたいと考えています。$(this.element).data('id')以下のコードで使用してみました：

helpers: {
    title: {
        type: 'over'
    },
    buttons: {
        position: 'bottom',
        tpl: '<div id="fancybox-buttons"><ul> \
                                            <li class="button"><a class="test-btn" data-id="' + $(this.element).data('id') + '" href="#"></a></li> \
                                        </ul></div>'
    }
}

しかし、それは機能しません。データ属性を取得すると、常にundefinedヘルパー関数内で返されます。これを機能させるにはどうすればよいですか。

4

3 に答える 3

4

@meagar は、ほとんどの人にとって通常は機能する優れたソリューションを提示しました。しかし、Fancybox を呼び出すために使用されたリンクが Ajax リクエストを介してページに読み込まれたため、彼のソリューションは私にはうまくいきませんでした。$(this.element).data('id')グローバル変数を宣言し、FancyboxafterLoadコールバックのグローバル変数に値を渡すことで解決しました。

afterLoad : function() {
    my_global_var = $(this.element).data('id');
}

次に、ヘルパー オプション内でグローバル変数を単純に使用しました。

于 2012-07-08T18:56:24.837 に答える
2

$(this.element).data('id')コールバックをバインドしているときに評価されています。this呼び出しているときに使用しているコンテキストは何でもかまいません$.fancybox。

Fancyboxをアンカータグにバインドしている場合は、すでにそのアンカータグを選択しています。このようなものが機能するはずです：

$('a.fancybox').each(funcion () {
  var $a = $(this);
  $a.fancybox({ tpl: "..." + $a.data('id') + "..." });
});
于 2012-06-21T14:56:08.513 に答える
0

phpのようなものでそれを行う方が簡単ではないでしょうか?

buttons : { 
 position: 'bottom',
 tpl: '...<a class="test-btn" data-id="<?php echo $post->ID; ?>" href="#"></a>...'
}

問題は、コールバック$(this.element)関数の外では使用できないことです...代わりにテンプレート内で使用しようとしています。

于 2012-07-08T10:19:28.877 に答える