jquery - 使用 Bootstrap 隐藏元素但保持唯一 ID

Question

我有一个简单的需求——我想响应式地呈现一个 div，稍后我需要使用 JavaScript 对其进行操作。考虑这段代码:

<div id="test" class="visible-lg-block visible-md-block visible-sm-block>Large Viewport</div>
<div id="test" class="visible-xs-block">Small Viewport</div>

请注意:上面div中的示例文本不是我的实际情况。我的实际案例包括每个 div 中的 JQuery UI 控件，如下所示:

<div id="test" class="visible-lg-block visible-md-block visible-sm-block>[[JQUERY CONTROL]]</div>
<div id="test" class="visible-xs-block">[[JQUERY CONTROL]]</div>

我使用 JQuery 在 JQUERY 控件上设置属性，当视口(viewport)为“xs”与“sm”、“md”或“lg”时，这些属性必须略有不同。

效果很好:当我以 1024x768 显示浏览器时，我看到“大视口(viewport)”；当我将浏览器缩小到 640x960 时，我看到“小视口(viewport)”。问题是这两个标签总是出现在呈现的 DOM 上，并且都有一个 ID 属性值“test”。我在 Javascript 中使用该唯一 ID 来查找 Div 标记——现在我的 JavaScript 可以看到其中的两个。

我该如何解决这个问题——是通过为每个 DIV 设置一个唯一的 ID，还是通过某种方式让“隐藏的”DIV 完全不呈现？理想情况下，我想要一个仅使用 Bootstrap 功能(我比较陌生)的解决方案，而不是需要 JavaScript 或 JQuery 的解决方案。

如果我必须使用 JS/JQuery，那么确定标签是否由 Bootstrap 呈现的最佳方法是什么？我真的不想使用媒体查询或尝试自己确定视口(viewport)大小，因为最终我希望 Bootstrap 拥有关于是否渲染 div 的“决策权”——我只想了解 Bootstrap 的决定，然后根据需要与可见的 div 进行交互。

谢谢。

Answer 1

感谢您的澄清。

最简单的解决方案可能是只使用 class 而不是 ID，或者给它们不同的 ID，并简单地将您的 Javascript 应用于两者，即使其中一个是不可见的.

如果这是不可能的，因为你的 jQuery UI Controller 正在做一些不应该对隐藏的 div 做的事情，那么考虑给它们两个相同的类(例如 mytestclass ) 并使用以下方法选择可见的:

$('.mytestclass:visible')

作为您的选择器。这只会选择一个 currently has a width or height在您的布局中，Bootstrap 隐藏的布局不会(由于 display: none; Bootstrap 提供)。

但不要忘记，如果视口(viewport)宽度稍后发生变化(浏览器调整大小、移动设备旋转等)，您可能需要监听此事件并将您的代码重新应用到新可见的 div。

这听起来是否适合您的场景？