Jquery 如何使onclick执行两个功能：显示描述和显示视频或图片

我试图找出一种方法，点击一个按钮，显示一个子分量div，然后再显示一个相关的视频

我需要它是可伸缩的，这样我添加的任何东西都会自动融入到流程中

这是小提琴的链接

Jquery

var $class = $('#vtab>div>h3');

$class.click(function(){
    $('#vtab>div>div').toggle();
    $('iframe').toggle();
});

$class.hover(function() {
    $(this).css('cursor','pointer');
});

HTML

我的最终目标是以这种方式添加10到30个视频。当按下按钮时，我只希望它显示一个视频。现在代码去掉了所有的描述和视频

---

感谢您的帮助。

您需要的是一种将

元素与包含描述和

的

元素关联的方法（我假设视频中有该元素）。第一部分很简单——它只是下一个元素。第二部分最好使用
数据-*
属性来实现，该属性将
链接到特定的

var $headings = $('#vtab > div > h3'),
    $iframe = $('.video iframe'),
    $divs = $('#vtab > div > div');

$headings.click(function() {
    // index of clicked element in jQuery Collection($headings)
    var ind = $headings.index(this);
    // filtering target elements according to the index
    $divs.hide().eq(ind).show();
    $iframe.hide().eq(ind).show();
});

您的HTML将变成：

<div id="vtab">
    <div class="classes">
         <h3 data-video="vid1">Welcome Home!</h3>
            <div>First Cool video</div>
         <h3 data-video="vid2">Welcome Home!</h3>
            <div>second cool video</div>
         <h3 data-video="vid3">Welcome Home!</h3>
            <div>third cool video</div>
         <h3 data-video="vid4">Welcome Home!</h3>
            <div>forth cool video</div>
    </div>
    <div class="video">
        <iframe class="vid1"></iframe>
        <iframe class="vid2"></iframe>
        <iframe class="vid3"></iframe>
        <iframe class="vid4"></iframe>
    </div>
</div>

var $class = $('#vtab>div>h3');

$class.click(function(){
    var $this = $(this); // this is the specific h3 you just clicked on
    $this.next().toggle(); // the .next() function gets the next element
    var video = $this.attr('data-video');
    $('.' + video).toggle();
});

$class.hover(function() {
    $(this).css('cursor','pointer');
});

将
元素上的类改为
id
也可能有意义，因为它们旨在唯一地标识视频。如果你这样做了，你会把上面代码中的
'.+video
改成
'.#'+video
。
太棒了！谢谢我只是读了下一篇文章，然后就开始玩了。让我提出你的建议谢谢你的解释。我正在尝试学习这些东西：-）谢谢我使用了这个模型：-）我在底部添加了var“}）.eq（0）。单击（）；”以便选择第一个
<div id="vtab">
    <div class="classes">
         <h3 data-video="vid1">Welcome Home!</h3>
            <div>First Cool video</div>
         <h3 data-video="vid2">Welcome Home!</h3>
            <div>second cool video</div>
         <h3 data-video="vid3">Welcome Home!</h3>
            <div>third cool video</div>
         <h3 data-video="vid4">Welcome Home!</h3>
            <div>forth cool video</div>
    </div>
    <div class="video">
        <iframe class="vid1"></iframe>
        <iframe class="vid2"></iframe>
        <iframe class="vid3"></iframe>
        <iframe class="vid4"></iframe>
    </div>
</div>

var $class = $('#vtab>div>h3');

$class.click(function(){
    var $this = $(this); // this is the specific h3 you just clicked on
    $this.next().toggle(); // the .next() function gets the next element
    var video = $this.attr('data-video');
    $('.' + video).toggle();
});

$class.hover(function() {
    $(this).css('cursor','pointer');
});