jquery - 如何让 onclick 执行两个功能 : show description and show video or picture

Question

我正在尝试找出一种方法来单击将显示子序列 div 的按钮。然后还播放相关视频。

我需要它具有可扩展性，以便我添加的任何内容都会自动合并到流程中。

这里是 fiddle 的链接http://jsfiddle.net/HSNrf/

Jquery

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

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

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

HTML

<div id="vtab">
    <div class="classes">
         <h3>Welcome Home!</h3>
            <div>First Cool video</div>
         <h3>Welcome Home!</h3>
            <div>second cool video</div>
         <h3>Welcome Home!</h3>
            <div>third cool video</div>
         <h3>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>

CSS

#vtab{
    width:100%;
    height:100%;
}

#vtab div > h3{
    background: #990099; /* Old browsers */
    border-radius:5px;
    margin:2px 0;
    font-size:22px;
  font-weight:bold;
  list-style:none;
  margin:2px 8px;
  text-align:center;
  text-shadow:#333333 0 -1px 0;
  color:#FFF;
  padding:5px;
  width:220px;    
}

.classes{
    float:left;
    width:250px;
}

.video{
    width:300px;
    border:1px solid #fff;
    float:left;
    overflow:hidden;
}

iframe{
     width:230px;
    margin:50px;
}

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

感谢您的帮助。

Answer 1

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();
});