如何使用按钮切换图像可见性？答案

【问题标题】：How to use buttons to toggle image visibility?如何使用按钮切换图像可见性？
【发布时间】：2020-12-26 20:23:51
【问题描述】：

我试图让一个按钮在您按下它们时显示图像，然后在您按下同一个按钮时隐藏它们。（我的代码中有 3 个不同的图像和 3 个不同的按钮）。在代码中，我使图像出现，但我不知道如何使相同的按钮隐藏图像。

function image1() {
  document.getElementById("image1").src = "image1.jpg";
}

function image2() {
  document.getElementById("image2").src = "image2.jpg";
}

function image3() {
  document.getElementById("image3").src = "image3.jpg";
}

<button onclick="image1()">image1</button>
<img src="" id="image1">

<button onclick="image2()">image2</button>
<img src="" id="image2">

<button onclick="image3()">image3</button>
<img src="" id="image3">

【问题讨论】：

如果你想使用 jquery，使用 jquery 切换会更容易。
将this 作为参数传递给函数，例如onclick=image1(this) 对于初学者。这允许您访问被单击的按钮。我可能也会使用data 属性而不是id。您还可以找到与单击的按钮最近的元素。
你最好用display: none隐藏图片。某些浏览器中的空/损坏的链接会提供看起来很难看的空图像字形。
你会用jQuery吗？
嗨@sonjor！如果答案帮助您解决了问题，请将其标记为已接受（按投票按钮下的复选标记）。对于您的问题，您只能接受一个答案。

标签： javascript html image function button

【解决方案1】：

我建议您将按钮和图像包装在子容器中。单击按钮时，获取父元素（包装器）并在其上切换一个类。

<div class="toggle-image">
  <button onclick="toggle(this)">Image 1</button>
  <img src="http://placekitten.com/100/100" />
</div>

CSS 选择器将负责隐藏图像。

.toggle-image.hidden img {
  display: none;
}

完整示例

function toggle(button) {
  button.parentElement.classList.toggle('hidden');
}

body {
  background: #111;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.toggle-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.toggle-image img {
  width: 100px;
  height: 100px;
  margin-top: 1em;
   box-shadow: 0.25em 0.25em #EEE;
}

.toggle-image.hidden img {
  display: none;
}

<div class="toggle-image">
  <button onclick="toggle(this)">Image 1</button>
  <img src="http://placekitten.com/100/100" />
</div>
<div class="toggle-image">
  <button onclick="toggle(this)">Image 2</button>
  <img src="http://placekitten.com/300/300" />
</div>
<div class="toggle-image">
  <button onclick="toggle(this)">Image 3</button>
  <img src="http://placekitten.com/500/500" />
</div>

【讨论】：

我认为将hidden 类应用到图像本身而不是容器上会更好。以这种方式带来更多的清晰度
@VoG 这似乎需要更多的工作。现在您必须上到父级，然后下到图像并调整该图像的可见性...如果您更改包装容器的“状态”，则可以使用 CSS 更优雅地处理它。我本可以将inactive 用作“隐藏”类名，但这不是重点。 Statefullness 胜过单个元素的操作。

【解决方案2】：

<button onclick="toggle('image1')">image1</button>
<img src="image1.jpg" id="image1">

<button onclick="toggle('image2')">image2</button>
<img src="image2.jpg" id="image2">


function toggle(targetID) {
  var imgElement = document.getElementById(targetID);
  if(imgElement.style.display == "block"){
     imgElement.style.display = "none";
  }else{
     imgElement.style.display = "block";
  }
}

可能是这样的？

【讨论】：

请避免发布仅包含代码而没有解释的答案，这有助于将来可能遇到相同问题的其他用户了解您为解决问题所做的工作。谢谢！

【解决方案3】：

const images = [
  'image.jpg',
  'image2.jpg',
  'image3.jpg'
];

const imagesBox = document.getElementById('images-box');

function image(index) {
  imagesBox.innerHTML = '';
  imagesBox.insertAdjacentHTML('beforeend' ,`<img src="${images[index]}"/>`);
}

button {
  padding: 8px 12px;
  border: 0;
  border-radius: 3px;
  background-color: #475863;
  color: white;
  margin: 5px;
}
#images-box {
  margin-top: 25px;
  padding: 25px;
  background-color: white;
  border: 1px solid #d1d1d1;
  border-radius: 3px;
}

<button onclick="image(1)">Button 1</button>
<button onclick="image(2)">Button 2</button>
<button onclick="image(3)">Button 3</button>
<div id="images-box"></div>

【讨论】：

请避免发布仅包含代码而没有解释的答案，它有助于将来可能遇到相同问题的其他用户了解您为解决问题所做的工作。谢谢！

【解决方案4】：

使用 jQuery。有一个方法调用toggle。会有很大帮助的。

$('#image').toggle()

【讨论】：

【解决方案5】：

你可以在下面做一些事情。

function image1() {
  
  document.getElementById("image1").classList.toggle("hideME");

}

function image2() {
   document.getElementById("image2").classList.toggle("hideME");
}

function image3() {
   document.getElementById("image3").classList.toggle("hideME");
}

.hideME {
  display : none;
}

<button onclick="image1()">image1</button>
<img src="image1.jpg" id="image1" class="hideME">

<button onclick="image2()">image2</button>
<img src="image2.jpg" id="image2" class="hideME">

<button onclick="image3()">image3</button>
<img src="image3.jpg" id="image3" class="hideME">

【讨论】：

请避免发布仅包含代码而没有解释的答案，这有助于将来可能遇到相同问题的其他用户了解您为解决问题所做的工作。谢谢！

【解决方案6】：

一种方法是反转元素hidden 属性，例如：

<span>
<button onclick="document.getElementById('pic1').hidden^=1" style="top: 25px; left:70px; position:absolute;" type="button">Show or Hide</button>
<img hidden id="pic1" width="50px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8Jyn5HwAFPgIhVXO6lgAAAABJRU5ErkJggg==">
</span>

【讨论】：

【解决方案7】：

您不应该更改 src 以隐藏/显示图像，这是一个合乎逻辑的更改，而您希望根据特定逻辑更改 UI/设计。

function hideShow(id) {
    var element = document.getElementById(id);
    element.style.display = (element.style.display === "none") ? "block" : "none";
}

<button onclick="hideShow('image1')">image1</button>
<img src="https://pbs.twimg.com/profile_images/821849411991044096/lQFa_Vly_400x400.jpg" id="image1" style="display: none;">

<button onclick="hideShow('image2')">image2</button>
<img src="https://media.gettyimages.com/photos/who-is-the-boss-picture-id480585465?s=612x612" id="image2" style="display: none;">

<button onclick="hideShow('image3')">image3</button>
<img src="https://hips.hearstapps.com/vader-prod.s3.amazonaws.com/1595961621-il_794xN.2460764659_56ur.jpg?crop=1xw%3A1xh%3Bcenter%2Ctop" id="image3" style="display: none;">

您可以看到我使用了单个function 并更改了style 的display 属性而不是src。 function 得到一个id，加载可识别的元素（这是一个img），如果它有一个none 的display，那么它被设置为block。否则设置为none。

【讨论】：

【解决方案8】：

这是一个使用data- 属性通过纯JS 和jQuery 将按钮绑定到特定图像ID 的示例。

data- 属性可以包含您喜欢的任何值。使用它们不会限制您在 DOM 树中放置元素。按钮和图像可以在代码中的任何位置，并且它们仍然可以相互找到。与使用依赖于具有相同父级的方法不同。但是，我确实同意这种方式更具可读性，因此由您决定什么更适合您的情况:)

/* Pure Javascript*/
// Get the buttons that have the data-image-id attribute
var buttons = document.querySelectorAll('button[data-image-id]');

// Go over each button to attach a click event
buttons.forEach(function(item, index) {

  item.addEventListener('click', function(event) {
    // Get the value of the data-image-id attribute
    var image_id = event.target.getAttribute('data-image-id');
    
    // Find the image with specific id and toggle the .active class on it
    document.getElementById(image_id).classList.toggle('active');
  });
  
});

/* Using jQuery */
/*
$('button[data-image-id]').click(function(event) {
  var $this = $(event.target);
  var image_id = $this.attr('data-image-id');
  $('#' + image_id).toggleClass('active');
});
*/

/* Hide images that do not have the .active class */
img:not(.active) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--
  The value of the data-image-id attribute
  is the same as the id of an image
-->
<button data-image-id="image1">image1</button>
<img src="https://picsum.photos/100/50" id="image1">

<button data-image-id="image2">image2</button>
<img src="https://picsum.photos/101/50" id="image2">

<button data-image-id="image3">image3</button>
<img src="https://picsum.photos/102/50" id="image3">

【讨论】：