Question

所以我对编码比较陌生，而且我一直试图设置一个切换按钮来隐藏/显示图像。但是，我希望它以隐藏的方式开始，然后在点击后显示，而不是首先显示的当前状态。

我尝试使用visibility="hidden"，但这只是让图片成为一个空白区域，仍然显示＆＃34;显示＆＃34;。如果有人可以帮助我/帮我修改我的代码，我们将不胜感激！

这是我一直在做的事情：

<button type="button" button class="btn btn-default btn-xs" onclick="$('#imgname').toggle();">view</button>
<div id="imgname">
    <img class="img-responsive" src="images/imgsource">
</div>

Answer 1

添加此jquery代码

$(function(){
   $("button").click(function(){
       $("img").toggleClass("hidden");
   });
});

更改html

<button type="button" button class="btn btn-default btn-xs" onclick="$('#imgname').toggle();">view</button>
<div id="imgname">
    <img class="img-responsive hidden" src="images/imgsource">
</div>

Answer 2

Aleksei的答案非常正确，但我认为你最初想隐藏div，是吗？最好的方法是使用CSS。稍微更改了HTML：

jsFiddle这里为您提供，它向您展示了它是如何工作的：）

HTML：

<button type="button" button class="btn btn-default btn-xs" onclick="$('#imgname').toggle();">view</button>

<div id="imgname">
<img class="img" src="images/imgsource">

jQuery（Aleksei的代码）：

  $(function(){
    $("button").click(function(){
   $("img").toggleClass("hidden");
   });
 });

那么CSS，如果你不确定如何使用CSS然后评论，我会帮你解决：）

 #imgname
 {
 display:none;
 }

隐藏显示切换按钮图像

2 个答案: