jqueryを使ってphp生成要素にクラスを追加

Question

私は助けが必要です。私はワードプレスのカスタムフィールドから文字列を持ってきています。この文字列は、youtubeとvimeoのiframe埋め込みコードです。 fancyboxがそのことをするために、このiframeにクラスを追加する必要があります。

<?php 
$videoLinks=get_post_meta($post->ID, "iframe video embed code", true); 
echo $videoLinks;?> 
<script> 
$('iframe').addClass('fancybox fancybox.iframe'); 
</script> 

iframe埋め込みコードをカスタムフィールドに挿入してテストすると、これが表示されます。 （無クラスを添加しない）手動fancyboxクラスでタグ付けされた画像上のjQuery、fancybox作品への比較的新しい

<iframe src="http://player.vimeo.com/video/33039612?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/33039612">HG Skis: Trillinton..</a> from <a href="http://vimeo.com/hgskis">HG Skis</a> on <a href="http://vimeo.com">Vimeo</a>.</p> <script> 
$('iframe').addClass('fancybox fancybox.iframe'); 
</script> 

。特定のイベントに基づいてクラスを追加すると問題が解決しますか？

Answer 1

はもちろん、私はあなたがfancyboxが仕事に行くされていないか、本当にfancyboxのv2.xの

Answer 2

タイミングが間違っている可能性があります。 fancyboxが、DOM準備ができたら自動的に起動するスクリプトを介して動作している場合、イベントハンドラを添付するための "fancybox"要素を探していると、addClassスクリプトが起動するまでにすでに完了している可能性があります。しかし、これは必ずしも問題ではないと私は言う。ドキュメント準備機能は実際には、ページが完全に構築される前に実行されているスクリプトよりも遅くなります。

構文に問題があります。'fancybox fancybox.iframe'は無効です。複数のクラスを追加する場合は、スペース区切りのクラスを追加できますが、「fancybox.iframe」は有効なクラスではありません。私はJavaScriptを追加することができますが、あなたはそれをスタイルすることはできませんし、それを選択する際に問題があるかもしれません。

$('iframe').addClass('fancybox')は必要ありませんか？

私はあなたのaddClassが最初に成功していることを確認し、そうであれば、必要なすべてのクラスが存在し、説明されている必要があります。次に、タイミングの問題をデバッグします。

Answer 3

あなたが表示したコードは正常に動作します。つまり、これを使ってファイルを開くと、次のようになります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<iframe>sfdfsf</iframe> 
<script> 
    $('iframe').addClass('fancybox fancybox.iframe'); 
</script> 

あなたのファンシーボックスコードはどのように見えますか？

あなたはこのようなものが埋め込まれた動画にユーチューブのリンクを有効にすることができます：

$(document).ready(function() { 

     $("a.youtube").click(function() { 
      $.fancybox({ 
       'padding'    : 0, 
       'autoScale'  : false, 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none', 
       'title'    : this.title, 
       'width'    : 680, 
       'height'    : 495, 
       'href'    : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
       'type'    : 'swf', // <--add a comma here 
      'swf'     : {'allowfullscreen':'true','wmode':'opaque'} 
       }); 
      return false; 

     }); 

同じことがVimeoのURLので行うことができます。