Question

我找到了一些教程，可以使用一些CSS，JavaScript和html隐藏图像，但是我很难先隐藏图像，然后使按钮能够显示，然后再次按下就可以隐藏。

edit：希望这段代码能有所帮助！再次，抱歉，我无法弄清楚其中的一些，我真的不知道该网站的工作方式，而且我对编码、、、、

还很陌生

edit 2：我添加了调用函数的位置。假设是多个选择，可以在正确时显示图像！

<style>
div.notdropdown {
    margin-top: 100px;
    margin-bottom: 100px;
    border: 1px solid black;
    background-color: rgb(181, 204, 180, 0.9);
}

.hide{
  display:none;
}
</style>
</body>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>



<div id="myDIV"> 
<img class= "hide" src="https://www.merriam-webster.com/assets/mw/static/art/dict/frig_bi.gif">
<br>
<a class= "hide" href="https://www.merriam-webster.com/dictionary/frigate%20bird">https://www.merriam-webster.com/dictionary/frigate%20bird </a>
<br>
</div>

<h1>What is a Frigate?</h1><br>
<form >
<input type="radio" name="choice" value="Bird"> A type of Bird
<input type="radio" name="choice" value="Mangrove"> A type of Mangrove tree
<input type="radio" name="choice" value="Sea Creature"> A type of Sea Creature
<input type="radio" name="choice" value="None"> None of These
</form>
<button onclick="submitAnswer();"> Submit Answer</button> 

</body>

<script>

function submitAnswer() {
  var radios = document.getElementsByName("choice");
  var i = 0, len = radios.length;
  var checked = false;
  var userAnswer;

  for( ; i < len; i++ ) {
     if(radios[i].checked) {
       checked = true;
       userAnswer = radios[i].value;
     }
  } 

  if(!checked) {
    alert("please select choice answer");
    return;
  }
  // Correct answer
  if(userAnswer === "Bird") {
     myFunction();
     alert("Answer is correct!");


  }
  // incorrect answer
  else {
     alert("Answer is wrong!");
  }

}



</script>
</body>
</html>

Answer 1

您只需要在button标签上调用函数。在您的html文件中添加一个您希望div切换的按钮。当您使用函数名称myFunction时，请使用 onClick="myFunction()" 而且您的代码应该可以正常工作。默认情况下，不需要添加任何新类甚至隐藏div。

Answer 2

实际上，这非常简单，只需使用toggle方法，即可轻松启用和禁用元素中的类

function toggleImage(){
  document.querySelector('#image').classList.toggle('hidden');
}

.hidden{
  display: none;
}

.w-100{
  width: 100%;
}

.mb-10{
  margin-bottom: 10px;
}

<button onClick="toggleImage()" class="w-100 mb-10">Show/Hide</button>

<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image" class="hidden w-100"/>

使用链接将标记更改为a并使用href="#"

function toggleImage(){
  document.querySelector('#image').classList.toggle('hidden');
}

.hidden{
  display: none;
}

.w-100{
  width: 100%;
}

.mb-10{
  margin-bottom: 10px;
}

<a onClick="toggleImage()" class="w-100 mb-10" href="#">Show/Hide</a>

<img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image" class="hidden w-100"/>

Answer 3

检查此代码。我认为这会对您有所帮助。

<button id = "showhide" onclick = "showhide()">Show Hide Image</button>

<div id = "image" style="width: 100px; height : 100px;"> 
    <h4> Image Code </h4>
</div>

<script>
    $('#showhide').on('click', function(e){
    $("#image").toggle();    
  });
</script>

Answer 4

默认情况下，您必须先使用CSS隐藏该元素，然后添加/删除一个使该元素可见的类。

示例：

<div class="magician">The Great Houdini</div>
<button>abra kadabra</button>

<style>
.magician {
display: none;
}
.show-me {
display: block;
}
</style>

现在，使用javascript，您可以为分配一个行为，以添加/删除“ show-me”类以使魔术师元素出现和消失。至少这是基本概念。

这是因为CSS样式会在页面加载时立即应用。 .show-me属性将覆盖显示：.magician中没有显示内容，因为此规则位于魔术师之后。因此，顺序在CSS中也很重要。

制作一个在单击时显示隐藏图像的按钮

4 个答案: