Jquery 在缩略图上单击“在其他分区中上拉视频”

我有两个div。第一个主要玩家拥有一个巨大的形象。第二个，#videoThumbnails包含三个图像（.thumbnailOne、.thumnbailTwo、.thumbailthree）。当用户单击三幅图像中的一幅时，我希望在主播放器中播放一段视频。但是，我不确定最好的方法：

我的第一个想法是在里面有一个隐藏的div，当点击三张图片中的一张时，它会显示在mainPlayer里面。我对jQuery不是很在行，但代码应该是这样的：

$(".thumbnailOne").click(function(){
 $("#mainPlayer).html(".hidden");
});

我的另一个想法是让#mainPlayer拥有三个不同的隐藏div，其中包含s。然后，当单击其中一个图像时，将显示相应的div

$(".thumbnailOne").click(function(){
  $('.hidden').css({"display:block"});
});

---

您建议如何创建一个脚本来实现所需的行为？另外，我了解JavaScript的基础知识，但对jQuery和DOM操作的了解很少，因此，如果有任何解释，我将不胜感激

您必须共享您的html，以便我们可以查看它。如果您需要视频，您必须将该html添加到带有视频url的主div中

下面是我在JSFIDLE中为您编写的一个使用youtube iframe的示例。

代码如下：

HTML

JQUERY

$('.video-thumbnails a').click(function(){
    $('.video-thumbnails a').removeClass('active');
    $(this).addClass('active');
    $('#mainPlayer').html('<iframe type="text/html" src="http://www.youtube.com/embed/'+$(this).attr('href')+'" allowfullscreen frameborder="0"></iframe>');
    return false;
});

$（'.video缩略图a'）。单击（函数（）{
$（'.video缩略图a'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（'#mainPlayer'）.html（''）；
返回false；
});

希望这有助于。。。当然，如果你愿意，你可以编辑它并使用html5视频

---

干杯

正如Medda86所提到的，查看您的html会很有帮助，这样我们就可以看到您正试图实现的目标。我有一个稍微不同的选择，取决于你在寻找什么

看看小提琴：

以下是HTML：

<div id="mainPlayer" data-activethumb="0">
    <p id="promptText">Please pick a video below</p>
    <div class="video" data-thumbnail="1">
        <h1>Video 1</h1>
        <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="video" data-thumbnail="2">
        <h1>Video 2</h1>
        <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="video" data-thumbnail="3">
        <h1>Video 3</h1>
        <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
</div><!-- End mainPlayer -->
<div id="videoThumbnails">
    <p> Select a video: </p>
    <div class="thumbnail" data-thumbnail="1">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="thumbnail" data-thumbnail="2">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="thumbnail" data-thumbnail="3">
        <img src="http://placehold.it/350x150">
    </div>
</div>

最后，JS：

$( document ).ready(function() {

    // When a thumbnail is clicked
    $('.thumbnail').click(function() {
        // Store the thumbnail that was clicked
        var thumb = $(this).data('thumbnail');

        if ($('#mainPlayer').data('activethumb') == 0) { // If no video has been activated
            // Fade out the text since one was chosen
            $('#promptText').fadeOut(300, 0, function() {
                // Callback: fade in the video
                $('.video[data-thumbnail='+thumb+']').fadeTo(300, 1);

                // Change the active thumb on the video div
                $('#mainPlayer').data('activethumb', thumb);
            }); 
        } else if ($('#mainPlayer').data('activethumb') != thumb) { // If a current video is active, but not the one clicked
            $('.video').fadeOut(300, 0, function() {
                // Callback: Fade in the new video
                $('.video[data-thumbnail='+thumb+']').fadeTo(300, 1);

                // Change the active thumb on the video div
                $('#mainPlayer').data('activethumb', thumb);
            }); 
        }



    });

});

---

我在这里所做的是利用自定义数据属性，并根据需要使用它们来显示或隐藏视频，以及让我知道视频是否已处于活动状态等。我尝试在任何对您有用的地方发表评论，但是如果您不确定任何事，请让我知道。这是一个非常基本的例子，但如果你是这样想的，你当然可以添加一些内容。

我认为这个问题更适合于感谢你的提问。我将看看我将如何实现它。我可能有一些后续问题，但这对我来说是最有意义的。很高兴你喜欢它！如果有任何问题，请随时告诉我way@strasbal加载每个iframe不是很理想。在请求时动态加载iframe是一种方法。请检查我的示例。如果只加载了少量iFrame，则不会导致任何问题。如果有更多实际明显的性能问题，代码可以稍加修改以传递iframe URL并轻松地修改现有的URL（例如通过使用jquery对象，或者更好地从数据库中修改），谢谢您的帮助。我将看一看代码，看看如何最好地实现它@斯特拉斯堡，我添加了，所以第一个视频是通过触发点击预加载，我添加了一个积极的视频检查，以及在这里，请让我知道，如果这对你的作品。干杯

<div id="mainPlayer" data-activethumb="0">
    <p id="promptText">Please pick a video below</p>
    <div class="video" data-thumbnail="1">
        <h1>Video 1</h1>
        <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="video" data-thumbnail="2">
        <h1>Video 2</h1>
        <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="video" data-thumbnail="3">
        <h1>Video 3</h1>
        <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
</div><!-- End mainPlayer -->
<div id="videoThumbnails">
    <p> Select a video: </p>
    <div class="thumbnail" data-thumbnail="1">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="thumbnail" data-thumbnail="2">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="thumbnail" data-thumbnail="3">
        <img src="http://placehold.it/350x150">
    </div>
</div>

#mainPlayer {
    text-align: center;
    padding: 5px;
    border: 1px solid #000;
    margin-bottom: 15px;
}

#mainPlayer p {
    font-size: 20px;
}

#videoThumbnails {
    text-align: center;
    padding: 5px;
    border: 1px solid #000;
}

.video {
    display: none;
}

.thumbnail {
    cursor: pointer;
}

$( document ).ready(function() {

    // When a thumbnail is clicked
    $('.thumbnail').click(function() {
        // Store the thumbnail that was clicked
        var thumb = $(this).data('thumbnail');

        if ($('#mainPlayer').data('activethumb') == 0) { // If no video has been activated
            // Fade out the text since one was chosen
            $('#promptText').fadeOut(300, 0, function() {
                // Callback: fade in the video
                $('.video[data-thumbnail='+thumb+']').fadeTo(300, 1);

                // Change the active thumb on the video div
                $('#mainPlayer').data('activethumb', thumb);
            }); 
        } else if ($('#mainPlayer').data('activethumb') != thumb) { // If a current video is active, but not the one clicked
            $('.video').fadeOut(300, 0, function() {
                // Callback: Fade in the new video
                $('.video[data-thumbnail='+thumb+']').fadeTo(300, 1);

                // Change the active thumb on the video div
                $('#mainPlayer').data('activethumb', thumb);
            }); 
        }



    });

});