javascript - 尝试遍历 DOM，以便在单击特定 div 时播放独特的视频

Question

所以，我需要在页面上动态生成内容 block 。这些 block 有一个缩略图，当单击它时，它应该打开一个模式，并显示一个独特的覆盖窗口以及独特的关联视频。

我正在尝试编写一些通用的 JavaScript 来正确遍历 DOM 树，以便当单击任何特定缩略图时，都会打开模态、关联的叠加层和关联的视频。

这是我现在拥有的示例(其中有很多，动态添加):

<div class="block">
    <div class="thumbnail">
        //Thumbnail image
    </div>
    <p>Video Description</p>
    <div class="window hide">
        <div class="video hide">
            //Video content
        </div>
    </div>
</div>
<div id="modal" class="hide"></div>

在尝试做很多不同的事情之后，我最终尝试为 JavaScript 做这样的事情，但这不起作用:

$(".thumbnail").on("click",function(){
     $("#modal").removeClass("hide").addClass("show");
     $(this).closest(".window").removeClass("hide").addClass("show");
     $(this).closest(".video").removeClass("hide").addClass("show");
});

CSS 非常基础:

.hide { display: none; }
.show { display: block; }

尝试使单击功能尽可能通用，以便它可以在单击的任何 .thumbnail 上运行。我还交换了 find(".window") 和 kids(".window") 但没有任何反应。关于我做错了什么有什么想法吗？谢谢!

Answer 1

根据您实际想要的类，我将使用以下代码:

$(".thumbnail").on("click", function () {
    var $block = $(this).closest(".block");
    $block.find(".window, .video").add("#modal").removeClass("hide").addClass("show");
});

演示: http://jsfiddle.net/gLMSF/ (使用不同但相似的代码)

它实际上根据单击的 .thumbnail 找到正确的元素。它找到其包含的 .block 元素，然后查看其后代以查找 .window 和 .video 元素。

如果您确实想在属性中包含 .，则需要对它们进行转义以进行 jQuery 选择。

至于样式，默认情况下您应该将样式设置为 display: block;，然后切换 hide 类。这样工作量更少，而且逻辑上更有意义。