jQueryクリックに基づいてdivコンテンツをスワップして非表示にする

Question

まず、この質問に101の質問がありますが、まだこの質問に答えられません。

YouTubeと同様のインターフェイスを作成しています。右側にビデオのサムネイルが表示され、ペインティングペインが表示されます。

次のようにサムネイル画像を表示するための私のループは次のとおりです。次のように

<?php function getVimeoThumb($id) { 
    $data = file_get_contents("http://vimeo.com/api/v2/video/$id.json"); 
    $data = json_decode($data); 
    return $data[0]->thumbnail_medium; 
} ?> 

<div id="thumb"> 
    <img src="<?php echo getVimeoThumb($id);?>" alt=""> 
    <h4><?php the_sub_field('child_title'); ?></h4> 
</div> 

私の主な特徴のビデオが表示されます。

<div id="feature"> 
    <h4 id="mainTitle"><?php the_sub_field('video_title'); ?></h4> 
    <iframe src="https://player.vimeo.com/video/<?php the_sub_field('video_id')?>" width="500" height="282"></iframe> 
</div> <!-- end of feature Container --> 

初期負荷はPHPによって行われます、しかし、DOM操作をjavascriptで達成する必要があります。

質問私は、これら2つのdiv要素の間だけでIDとテキストを入れ替えることができますどのように

1. 。

2. また、機能フレームに表示されているようにクリックされたサムネイルを非表示にすることもできます。

多くのおかげで、親指で

Answer 1

、あなたはとてもあなたがjQueryを介して、簡単に取り出すことができ、あなたのdivにrel上のIDを入れることができます：

`<div id="thumb" rel="your_id">...</div>` 

そして、それを得るために$('#thumb').attr('rel') 。

は、その後、あなたはそれは、しないIDからあなたに完全なURLを与えるJavaScript関数を作成し、replace（）メソッドは、文字列のプロトタイプに添付している$('#feature iframe').attr('src','your_url')