如何隐藏附加到div的图像答案

【问题标题】：How to hide an image appended to a div如何隐藏附加到div的图像
【发布时间】：2019-12-03 16:48:47
【问题描述】：

我创建了一个 Rails API 后端，并正在尝试创建一个记忆匹配纸牌游戏。从后端，我正在获取马里奥角色的图像并将其附加到我在前端创建的 tile div 中。目前，瓷砖与字符一起显示。我希望“图块”的默认操作是它们仅显示为隐藏图像的 div，然后我将在前端的 JS 中创建一个事件侦听器，以便当且仅当图块时显示图像被点击。我不确定是否需要在 CSS 中执行此操作（可见性：隐藏只是隐藏整个 div，但我希望只显示 div 背景颜色而不显示附加图像）或者我是否应该在 JS 中创建某种类型的函数来处理这个？

【问题讨论】：

为什么不直接在图片上使用visiblity: hidden css 规则，比如div img { visiblity: hidden; } ？
嗨阿丽娜！欢迎来到堆栈溢出！请将您的 html、css 和 js 基本代码粘贴到您尝试实现此行为的位置，以便更容易理解您的尝试。我建议你阅读Create a Minimal, Reproducible Example的指南

标签： javascript html css hidden styling

【解决方案1】：

jquery解决方案

// replace imageId with your image id selector in your html
$('#imageId').hide();

js 解决方案

document.getElementById("imageId").style.visibility = "hidden";

【讨论】：

OP 似乎没有使用 jQuery，因此需要 css 或纯 js 解决方案
我会发一个js回答

【解决方案2】：

您需要为 tile div 设置固定大小并为 tile div 提供背景。并在 tile div 中通过给出样式 display:none 放置您的图像，并且每当您单击父 tile div 设置图像显示样式：block

【讨论】：

【解决方案3】：

有很多方法可以解决这个问题。我会建议使用 css 来解决它。您创建 show hide css 并打开事件侦听器。这是工作示例。

https://stackblitz.com/edit/typescript-jfxbgs

//JS

document.querySelectorAll('.tiles p').forEach(x => {
  x.addEventListener("click", ({target}) => {
    const img = target.parentNode.querySelector("img")
   if(img.className == "hide")
    img.className = ""
    else 
    img.className = "hide"
  })
})

//CSS

#app {
  display: flex;
  justify-content: space-around;
}
.tiles img.hide {
  visibility: hidden;
}
.tiles img {
  visibility: inherit;
}

//HTML

<div id="app">
  <div class="tiles">
    <img class="show" src="https://via.placeholder.com/150"/>
    <p>title</p>
  </div>
  <div class="tiles">
    <img src="https://via.placeholder.com/150"/>
    <p>title</p>
  </div>
<div class="tiles">
    <img src="https://via.placeholder.com/150"/>
    <p>title</p>
  </div>
</div>

【讨论】：