jQueryが各部門に1回追加されます

Question

ServiceNowのサービスポータルでYouTubeウィジェットを開発していて、.appendに問題が発生しています。 Appendはiframeをdivに複数回追加していますが、一度追加するだけです。私のHTMLとクライアント側のコードは以下の通りです：

<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <span class="panel-title"><i class="fa fa-{{c.glyph}}" aria-hidden="true"></i>&nbsp; {{c.title}}</span> 
    </div> 

    <div class="fluidMedia"></div> 
    </div> 

クライアントスクリプト：私はこれを見る私のコンソールで

function($scope,$sce,spModal) { 
     var c = this; 

     //Get option values 
     c.title = c.options.title || 'Training Video'; 
     c.glyph = c.options.glyph || 'youtube'; 
     //c.video = c.options.video_url; 

     console.log('Options'); 
     console.log(c.options); 

     c.server.get().then(function(r) { 
      console.log('Response'); 
      console.log(r); 
      c.data.video = $sce.trustAsResourceUrl(r.data.video); 
      $('div .fluidMedia').append('<iframe class="media" src='+ c.data.video +' frameborder="0" allowfullscreen></iframe>') 
     }); 
    } 

それらのすべてがされているので、3つのビデオは基本的に互いの上に積層されていますdiv.fluidMediaに追加されます。どのようにしてdiv.fluidMediaに別のビデオが追加されるのですか？ありがとう！

Answer 1

どのように私はそれは別の映像が各div.fluidMediaに追加されるようになるだろうか？

"各div.fluidMedia" 1つしかありません。毎回iframeを置き換えるdiv.fluidMediaが1つ必要な場合は、新しいビデオを取得します。

$('.fluidMedia iframe').empty(); 
$('div .fluidMedia').append('<iframe class="media" src='+ c.data.video +' frameborder="0" allowfullscreen></iframe>') 

または

$(.panel).append('<div class="fluidMedia"><iframe class="media" src='+ c.data.video +' frameborder="0" allowfullscreen></iframe></div>'); 

クラス "fluidmedia" と 複数のdiv