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

$(".toggle").click( function(e) {
    // Don't show # in url
    e.preventDefault()
    // The content to toggle
   $(".img").toggle()
})

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

有些人可能认为通过这样的查询来隐藏/显示图像是可以的:

假设类为.hide {display: none}，图像的默认显示状态为block。

示例代码:

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

虽然这将工作，但你必须遍历所有的图像。

一个更好的方法是抓住图像的容器，并根据一个可以在容器本身上切换的类使图像隐藏/显示。

示例代码:

有以下CSS:

.hide .images {display: none;}

和以下jQuery:

function toggleImages() { 
   var container = $('#container');
   container.toggleClass('hide'); 
}

希望有人发现这有帮助!其中一个应用程序是设置聊天用户在聊天中切换头像。