2

我试图找出一种方法来单击将显示子 div 的按钮。然后还显示一个相关的视频。

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

这是小提琴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 个视频。按下按钮时，我只希望它显示一个视频。现在代码摆脱了所有的描述和所有的视频。

谢谢您的帮助。

4

2 回答 2

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();
});
于 2013-05-03T20:28:31.680 回答
1

您需要一种将<h3>元素与<div>包含描述和<iframe>（我假设有视频）相关联的方法。第一部分很简单——它只是下一个元素。第二部分最好使用将链接到特定的data-*属性来实现。<h3><iframe>

您的 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');
});

<iframe>将元素上的类更改为 an 也可能有意义id，因为它们旨在唯一标识视频。如果你这样做了，你会在上面的代码中更改'.' + video为'#' + video。

于 2013-05-03T20:28:58.363 回答