javascript - jQuery根据点击交换和隐藏div内容

Question

首先有101个问题与此类似，但仍然无法回答此问题。

我正在创建一个与 youtube 类似的界面，右侧有视频缩略图和一个疼痛播放 Pane 。

我的显示缩略图的循环如下:

<?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 实现。

问题

1. 如何在这两个 div 之间仅交换 ID 和文本。

2. 我还想隐藏功能框架中显示的已单击的缩略图。

非常感谢

Answer 1

在你的拇指上，你可以将 id 放在 div 上的 rel 上，这样你就可以通过 jQuery 轻松检索它:

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

还有一个 $('#thumb').attr('rel') 来获取它。

然后，您可以创建一个 JavaScript 函数，为您提供 ID 中的完整 URL，并通过 $('#feature iframe').attr('src','your_url') 更新您的 iframe src