Question

因此，我需要在页面上动态生成内容块。这些块有一个缩略图，当它被点击时，它应该打开一个模态，并显示一个独特的覆盖窗口，以及唯一的相关视频。

我正在尝试编写一些能够正确遍历DOM树的通用JavaScript，这样当点击任何特定的缩略图时，模式，关联的叠加层和相关的视频将会打开。

以下是我现在所拥有的一个例子（其中有许多是动态添加的）：

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

尝试使click功能尽可能通用，以便它可以在任何被点击的.thumbnail上工作。我也互换了find（“。window”）和孩子们（“。window”），但没有任何反应。关于我做错了什么的任何想法？谢谢！

Answer 1

HTML中的类名存在很大问题：

<div class=".block">

应该是

<div class="block">

你的模态是唯一一个正确命名类的模态。你的DOM遍历不起作用，因为他们正在寻找“阻止”，但它被称为“.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>

Answer 2

您的代码无法正常工作，因为您的选择器在您的课程中有句点（.），如果这实际上是您想要的，您应该这样尝试：

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

否则只需尝试从类中删除句点...

另外，您错误地使用了.closest()，因为looks up through ancestors in the DOM tree...

您应该将代码更改为：

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

Answer 3

根据您class es的实际需要，我会使用以下代码：

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

DEMO： http://jsfiddle.net/gLMSF/（使用不同但相似的代码）

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

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

至于样式，默认情况下你应该只设置样式为display: block;，然后切换hide类。它的工作量较少，逻辑上更有意义。

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

3 个答案: