Wordpress / Modal / JS bug - modals 突然停止工作答案

【问题标题】：Wordpress / Modal / JS bug - modals stopped working suddenlyWordpress / Modal / JS bug - modals 突然停止工作
【发布时间】：2019-03-19 07:48:52
【问题描述】：

我有纯 JS 和 HTML 的网站，并将其转移到 WordPress。直到几天前一切正常。突然，我在现场的两个功能停止工作，都在添加“活动”类。首先应该激发模态功能，其次是Tab功能。它工作得很好，但突然不行，我想可能是因为 wordpress 更新了？这是它不起作用的页面：

https://lumitestx.lumitrix.eu/outdoor/ - 第二个“幻灯片”，它是带有点的投影仪 - 它应该会激发模态。

我在这里有完整的工作版本： https://lumitrix-web.incolor.cz/outdoor/ 这就是它应该如何工作的方式。它确实发生了，只是突然停止了。请有人知道为什么添加“活动”类成为问题或什么是问题？ :) 非常感谢！

这是损坏的部分的图像

【问题讨论】：

您检查浏览器控制台是否有错误？

标签： javascript html css wordpress modal-dialog

【解决方案1】：

我看到它在第二个链接 (https://lumitrix-web.incolor.cz/outdoor/) 上也能正常工作。在比较两者时，我注意到您在两者上都设置了带有data-toggle="#point-modal" 的“点”，这意味着模态容器（div）需要具有唯一的“点模态”ID。

在此站点 (https://lumitestx.lumitrix.eu/outdoor/) 上，模态容器 (div) 存在，但它没有点模态 ID 属性，因此无法找到它。

运行document.getElementById('point-modal') in the developer console. 很容易判断它是否丢失，它在https://lumitestx.lumitrix.eu/outdoor/ 上返回空值。所以本质上你需要确保与每个“点”对应的模态容器具有正确的 ID。

<div class="point skrollable skrollable-before" data-toggle="modal" data-target="#point-modal">

需要

<div class="modal fade" id="point-modal"....>

如果你想让我详细说明任何事情，请告诉我。

【讨论】：

您好，感谢您的回答。确实，这样会出现某种类型的模态。但是在它工作的站点上，它不是由 id="point-modal" 完成的。也许这会有所帮助，它的 html + javascript。 [链接]codepen.io/anon/pen/eXjbNr [/链接]。它是脚本，因此模态框具有分页，您可以单击它们。如果您查看开发人员工具，它将添加活动点类，但没有出现，如果您单击下一个点，它将再次添加类，但之前不会从点中删除类。问题是两个站点上的代码完全相同。它出于某种原因停止了工作。非常感谢！
抱歉，我不太清楚你要问什么。 codepen 缺少许多依赖项、CSS 和 JS，因此很难重现该功能。我将它分叉 (codepen.io/Jeff518Code/pen/ZPjdLL) 并添加了一些缺失的库，如 jQuery 和 jQuery UI，但它仍然缺少太多以获得准确的表示。我必须完整地查看代码。您在问如何确保活动类正确切换或如何确保分页在模态本身内工作？