Question

我在包装div中有一堆图像。除了用户点击之外，我需要隐藏所有这些内容这样做最简洁的表现方式是什么？我是否应该对所有这些应用类来隐藏所有这些并且过滤掉被点击的那个并且仅显示那个或者我应该循环它们所有隐藏它们作为循环进展除了被点击的那个或其他东西之外？

TNX

Answer 1

在现代桌面浏览器中，您不会看到任何差异。浏览器经过调整，以便在渲染任何更改时都能快速实现DOM三。 Guts告诉我，循环遍历所有图像并根据使用样式属性单击的项目而不是使用类来设置可见性可能会更快。这样，您只需处理N个元素，不涉及外部CSS文件。如果隐藏全部并显示单击的元素，则处理N + 1个元素。

在您的情况下，从开发人员的角度来看，我会使用最快，更易管理和更干净的解决方案，因为如果您使用一种方法或另一种方法，最终结果不会有太大差异。

Answer 2

最高效的方法之一就是让CSS实现可见性。听起来像你一次只显示一个，在这种情况下你可以通过使用类来完成两个DOM操作;

// scope above
var lastClicked = null;

// then  in click listener, 1st param `e`
if (lastClicked) lastClicked.className = ''; // remove visible class
lastClicked = e.target; // get clicked node
lastClicked.className = 'visible'; // add visible class

我假设event.target但是根据侦听器的附加方式，您可能希望使用this或其他逻辑。此外，如果您希望获得element.classList支持，则可以使用add和remove。

如何仅显示具有类标记visible的节点的示例CSS。

selector:not(.visible) {
    display: none;
}

Answer 3

PS：如果你正在使用jquery，你可以使用以下内容：

可以说，你的div有id ='test-div'，里面有几张图片。所有这些图像都可以访问：

$('#test-div img')

现在，让我们假设您知道点击的图像的ID。让我们假设id ='my-image'。

您可以执行以下操作来隐藏所有其他图像（“my-image”除外）：

$('#test-div img').not('#my-image').addClass('hide')

切换可见性时的DOM操作性能

3 个答案: