Javascript 尝试遍历DOM，以便在单击某些div时播放唯一的视频

因此，我需要在页面上动态生成内容块。这些块有一个缩略图，单击它时，它将打开一个模式，并显示一个唯一的覆盖窗口，以及唯一的关联视频

我试图编写一些通用JavaScript来正确地遍历DOM树，这样当单击任何特定的缩略图时，就会打开一个模式、相关的覆盖和相关的视频

下面是我现在拥有的一个示例（其中有许多，动态添加）：

CSS非常基本：

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

---

尝试使click函数尽可能通用，以便它可以在任何被单击的.缩略图上工作。我还交换了find（“.window”）和children（.window”），但什么也没发生。你知道我做错了什么吗？谢谢

HTML中的类名有一个很大的问题：

<div class=".block">

应该是

<div class="block">

您的modal是唯一一个正确命名了类的modal。您的DOM遍历将不起作用，因为它们正在查找“block”，但它被称为“.block”

因此，解决这一切，您将获得更多的成功：

<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>

//缩略图像
视频描述

//视频内容

您的代码无法工作，因为您的选择器在类中有句点（

），如果您真的想要句点，您应该这样尝试：

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

否则，请尝试从类中删除句点

此外，您使用的

.nestest（）

也不正确，因为

您应该将代码更改为：

$(".\\.thumbnail").on("click",function(){
     $(this).next("\\.window").children(".video")
            .addBack().add("#modal").removeClass("hide").addClass("show");
}); 

---

根据您实际想要的

类

es，我将使用以下代码：

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

演示：（使用不同但相似的代码）

它实际上根据单击的

缩略图

查找正确的元素。它找到其包含的

.block

元素，然后查看其子元素以查找

.window

和

.video

元素

如果您确实希望在属性中包含

，则需要将它们转义以供jQuery选择

---

至于样式，您可能只需要将样式设置为

display:block，然后切换
隐藏
类。它的工作量更少，逻辑上更合理。
我想您应该使用
var$block=$（this）.closest（“.block”）
然后使用
$block.find（“.window，.video”）.add（“#modal”）.removeClass（“hide”）.addClass（“show”）取而代之。同时，你可以看看兄弟姐妹，但这对我来说更容易。是的，
类
属性中有一个
属性……你是说这个吗？我想。最近的一个属性在DOM树上移动，所以它不会找到兄弟？我会选择.sides（'.window'）或类似的类。您不需要“show”类，只需将“show”设置为默认样式并仅使用“hide”。在我修复了类名之后，这个类实际上工作正常！谢谢
$(".\\.thumbnail").on("click",function(){
     $(this).next("\\.window").children(".video")
            .addBack().add("#modal").removeClass("hide").addClass("show");
}); 

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