有效地切换多个图像的可见性

Question

我有一个聊天网络应用程序，需要在聊天设置中使用 hide/show 个头像。

你会如何有效地处理它？这样您就可以轻松地显示图像，而无需解析所有图像。

发布这个问题并为那些像我一样需要这样的人回答

Answer 1

有些人可能认为通过这样查询 hide/show 图像是可以的 :

假设class.hide {display: none}且图像的默认显示状态为块。

示例代码：

 var images = document.querySelectorAll('.images');

 images.toggleClass('hide');

虽然这会奏效，但您必须经常检查所有图像。

更好的方法是获取图像的容器并根据可以在容器本身上切换的 class 制作图像 hide/show。

示例代码：

具有以下 CSS :

.hide .images {display: none;}

和以下 jQuery：

function toggleImages() { 

   var container = $('#container');

   container.toggleClass('hide'); 

}

最终结果是这样的：class 将在容器上切换，css 样式将应用更改。

希望有人觉得这有帮助！它的一个应用是聊天用户在聊天中切换头像的设置。

Answer 2

这是一个 link 切换图像可见性的快速示例

HTML

<img src="http://placehold.it/50/50" class="img">
<img src="http://placehold.it/50/50" class="img">
<img src="http://placehold.it/50/50" class="img">

<a href="#" class="toggle">Toggle images</a>

jQuery

$(".toggle").click( function(e) {

    // Don't show # in url
    e.preventDefault()

    // The content to toggle
   $(".img").toggle()
})

示例：http://jsfiddle.net/d0a7xofn/

有效地切换多个图像的可见性

Efficiently toggle visibility on multiple images

jquery

performance

frontend