使用单个按钮打开和关闭图片 (JavaScript)答案

【问题标题】：Opening and closing pictures with single buttons (JavaScript)使用单个按钮打开和关闭图片 (JavaScript)
【发布时间】：2020-01-25 21:38:47
【问题描述】：

我是 JavaScript 新手。我创建此代码是为了尝试制作将隐藏的按钮并在页面上显示某些图片。我有 3 个按钮，第一个按钮应该在 <script></script> 标签中运行我的 JavaScript 代码，另外两个按钮里面只有 Javascript 代码，它们工作正常。但是一旦第二次单击它们，它们就不会隐藏图片，这就是为什么我尽可能尝试对第一个进行此操作的原因。

由于某种原因，我无法让第一个带有“open()”的按钮按照我想要的方式使用我的 Javascript 代码。有更多经验的人可以向我解释我做错了什么吗？提前谢谢你...

var btn1 = document.getElementById('1');
var btn2 = document.getElementById('2');
var btn3 = document.getElementById('3');
var display1 = btn1.getAttribute('display')
var display2 = btn2.getAttribute('display')
var display3 = btn3.getAttribute('display')

function open() {
  if (display1 === ('none')) {
      btn1.setAttribute('display', 'block');
  }  else { 
    btn1.setAttribute('display', 'none');
  }
}

<img id="1" src="forge.PNG" style="height:320px; display:none; padding:10px">
<img id="2" src="lizard.jpg" style="height:320px; display:none; padding:10px">
<img id="3" src="walkway.jpg" style="height:320px; display:none; padding:10px">

<button onclick="open()">1</button>
<button onclick="document.getElementById('2').style.display='block'">2</button>
<button onclick="document.getElementById('3').style.display='block'">3</button>

【问题讨论】：

标签： javascript html css

【解决方案1】：

我会使用事件委托来监视容器上的点击。单击nth 按钮时，选择nth 图像，然后切换隐藏/显示图像的类：

const images = document.querySelectorAll('img');
const buttons = [...document.querySelectorAll('button')];

document.addEventListener('click', (e) => {
  if (e.target.matches('button')) {
    const i = buttons.indexOf(e.target);
    images[i].classList.toggle('hidden');
  }
});

.hidden {
  display: none;
}

<img id="1" src="https://www.gravatar.com/avatar/34932d3e923ffad9a4a1423e30b1d9fc?s=48&d=identicon&r=PG&f=1" style="height:320px; padding:10px" class="hidden">
<img id="2" src="https://www.gravatar.com/avatar/978ec0c47934c4b04401a8f4b4fec8bd?s=32&d=identicon&r=PG&f=1" style="height:320px; padding:10px" class="hidden">
<img id="3" src="https://lh3.googleusercontent.com/-uIr21N5ccCk/AAAAAAAAAAI/AAAAAAAAHeg/ohNEkpJKXQA/photo.jpg?sz=32" style="height:320px; padding:10px" class="hidden">

<button>1</button>
<button>2</button>
<button>3</button>

您的原始代码存在的问题包括：

您正试图在元素存在于 DOM 之前对其进行选择
元素没有display 属性 - 为了检查元素的样式，您必须先访问其.style 属性（例如，someImage.style.display）
同样，要设置元素的样式，您必须设置其style 属性的属性（例如someImage.style.display = <newDisplay>）。设置元素的显示属性不会做任何事情。

尽可能避免使用内联处理程序 - 它们有 many problems 并且几乎被普遍认为是非常糟糕的做法。始终使用 Javascript 正确附加侦听器，只要可以选择。

【讨论】：

老兄，你是救生员。谢谢！

【解决方案2】：

事件监听器是更好的解决方案，但如果您想以自己的方式查看工作代码：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>switchpics</title>
</head>
<script type="text/javascript">

var open = function(param) {
  img = document.getElementById(param.innerHTML);

  if (img.style.display == 'none'){
    img.style.display = "block";
  } else {
    img.style.display = "none";
  };
};
</script>
<body>
  <img id="1" src="1.jpg" style="height:20px; display:block; padding:10px">
  <img id="2" src="1.jpg" style="height:20px; display:none; padding:10px">
  <img id="3" src="1.jpg" style="height:20px; display:none; padding:10px">

  <button onclick="open(this)">1</button>
  <button onclick="open(this)">2</button>
  <button onclick="open(this)">3</button>
</body>
</html>

【讨论】：