Question

我想通过点击<button>

来显示/隐藏图片

这是我试过的：

脚本：

<script type="text/javascript" >
$(document).ready(function () { 
  $('#buttontest').toggle(function() {
    $('#LogoTest').fadeOut('slow');
  }, function() {
    $('#LogoTest').fadeIn('slow');
  });
});
</script>

HTML：

<input type="button" id="buttontest" value="Show/Hide 1">
<a href="image1.jpg">
 <img src="image1.jpg" border="0" width="900" height="300" alt="image1" target="nowa_strona" id="LogoTest">
</a>
<br>
<input type="button" id="buttontest1" value="Show/Hide 2">
<a href="image2.jpg">
  <img src="image2.jpg" border="0" width="900" height="300" alt="image2" target="nowa_strona" id="LogoTest1">
</a>
<br>

当我点击相应的<button>

时，如何显示/隐藏图像

Answer 1

.toggle()

此方法签名在jQuery 1.8中已弃用，已删除 jQuery 1.9。 jQuery还提供了一个名为.toggle（）的动画方法切换元素的可见性。无论是动画还是动画 event方法被触发取决于传递的参数集。

Answer 2

$('#buttontest').on("click",function(e)
{  
 $('#LogoTest').toggle();
});

$('#buttontest1').on("click",function(e)
{  
 $('#LogoTest1').toggle();
});

See Demo

希望它可以帮助你

Answer 3

使用以下代码：

$(document).ready(function () { 
    $('#buttontest').click(function() {
       $('#LogoTest').toggle('slow');
    }
 });

Answer 4

您可以使用以下代码：

$(document).ready(function () { 
    $('#YourButtonID').click(function() {
       $('#YourImageID').toggle('slow');
    }
 });

请注意，上面的代码非常棒。但我不推荐它，因为jQuery的$(document).ready()减慢了。这是document for your reference。

所以，根据你的说法，你应该选择$(document).ready()。

对于您的问题，您可以执行以下替代代码：

$('#YourButtonID').on("click",function(e)
{  
 $('#YourImageID').toggle('slow');
});

快乐探索：）

Answer 5

最好的方法是将您的按钮和图像包装在div元素中。在这种情况下通过它是没有必要的，但通过这种方式你总是可以显示/隐藏正确的图像。只需在图片中添加一个类名logotest，就可以在点击buttontest类的按钮时显示/隐藏它。

以下是我的示例：http://jsfiddle.net/7xhxq/

使用按钮显示/隐藏图像 - jQuery

5 个答案: