Question

我正试图找出一种方法来点击一个显示一个子序列div的按钮。然后还会显示相关视频。

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

的链接

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

Answer 2

您需要的是一种将<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>元素上的类更改为id也可能有意义，因为它们旨在唯一标识视频。如果您这样做，则会在上面的代码中将'.' + video更改为'#' + video。

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

2 个答案: