在 HTML 中切换图像隐藏/可见

【问题标题】：Toggle images hide/visible in HTML在 HTML 中切换图像隐藏/可见
【发布时间】：2018-09-21 21:00:50
【问题描述】：

事情是这样的，我希望我的 HTML 文件中的一些图片首先被隐藏，在其位置留下黑色。并且在点击后显示。我可以将 js 代码放在我的布局文件中，但为了保持代码的简洁和可读性，不应该有 div span 标签或 id 或 class，只需在 img 标签中添加“onclick”等参数即可。

当前代码：

  <script type="text/javascript">
     function toggle_visibility() {
        if ( this.style.visibility == 'hidden' )
           this.style.visibility = 'visible';
        else
           this.style.visibility = 'hidden';
     }
 </script>



 <img onclick="toggle_visibility();" src="IMG.jpg"/>

【问题讨论】：

请用您现有的代码更新问题
"我可以将 js 代码放入我的布局文件中" 怎么样？您能向我们展示您到目前为止所做的尝试吗？

标签： javascript html css

【解决方案1】：

为每个需要该功能的元素添加特定的类。在我的示例中，此类是“图像”。

另外你需要将图像的draggable设置为false，否则你在拖动时仍然可以看到图像。

document.addEventListener('click', function(e) {
    if (e.target.classList.contains('image')) {
        e.target.style.filter = 'brightness(100%)';
    }
});

img.image {
    height: 100px;
    filter: brightness(0%);
}

<img class="image" src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/ draggable="false">
<img class="image" src="https://dictionary.cambridge.org/images/thumb/chick_noun_002_06563.jpg?version=4.0.44"/ draggable="false">

【讨论】：