1

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

我正在尝试编写一些可以正确遍历 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; }

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

4

3 回答 3

0

您在 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>
于 2013-07-17T16:36:50.947 回答
0

您的代码将不起作用，因为您的选择器.在您的类中有句点 ( ) 如果这实际上是您想要的，您应该像这样尝试：

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

否则，只需尝试从课程中删除句点......

此外，您使用.closest()不正确，因为它通过 DOM 树中的祖先查找...

您应该将代码更改为：

$(".\\.thumbnail").on("click",function(){
     $(this).next("\\.window").children(".video")
            .addBack().add("#modal").removeClass("hide").addClass("show");
});
于 2013-07-17T16:37:42.697 回答
0

根据您实际希望您的classes 是什么，我将使用以下代码：

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

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

它实际上会根据 clicked 找到正确的元素.thumbnail。它找到它的包含.block元素，然后查看它的后代以找到.windowand.video元素。

如果你真的想包含.在你的属性中，你需要为 jQuery 选择转义它们。

至于样式，您可能应该只是display: block;默认样式，然后切换hide类。它的工作量更少，并且在逻辑上更有意义。

于 2013-07-17T16:42:33.420 回答