Question

我在点击按钮时试图隐藏/显示图像。我希望在这个小项目中只使用JavaScript，CSS和HTML。我到目前为止的代码是：

<span id = "one">
<img src = "1.png" alt = "Picture of 1" style="display: none;"/>
</span>

<input type="button" value="One" onclick="showOne();" />

<script type = "text/javascript" src= "123clickJs.js">
</script>

^那是HTML。

这是JavaScript：

function showOne() {
var img1 = document.getElementById("one");
img1.style.display = "";
  if(img1.style.display == "inline" ) {
    img1.style.display = "none";
  }
  else {
  img1.style.display = "inline";
  }
}

但由于某种原因，它并没有切换图像可见/隐藏。关于我可能做错的任何想法？

Answer 1

如果你只是使用一个类，隐藏或显示任何内容会更直接。

oneButton.onclick = function () {
  one.classList.toggle('show');
}

#one {
  display: none;
}
#one.show {
  display: block;
}

<input id="oneButton" type="button" value="Toggle the image" />

<div id="one">
  <img src="http://i.imgur.com/a2F7iyp.jpg" alt="Picture of 1" />
</div>

Answer 2

在您的代码中，您首先设置img1.style.display = ""，然后检查它是inline还是none。 ""，因此始终会忽略if条件。

请改为尝试：

function showOne() {
  var img1 = document.getElementById("one");
  if (!img1.style.display !== "none") {
    // If the image is displayed, whatever its style is, hide it
    img1.style.display = "none";
  } else {
    // Otherwise display it
    img1.style.display = "inline";
  }
}

Answer 3

我认为你可以简单地使用toggle（）

的JavaScript

$("#radio_btn").on("click", function () {
    $('.img_display').toggle();
});

HTML

<span id="one">
<img class="img_display" src = "http://www.monochrome-photo.info/home/nbigeast/monochrome-photo.info/public_html/wp-content/uploads/2012/10/1349454271_apple.png" alt = "Picture of 1" style="display: none;">
</span>

<input type="button" value="One" id="radio_btn" />

隐藏/显示图像

3 个答案: