0

我想通过单击来显示/隐藏图像<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>

4

5 回答 5

1

.toggle()

此方法签名在 jQuery 1.8 中已弃用，并在 jQuery 1.9 中删除。jQuery 还提供了一个名为 .toggle() 的动画方法，用于切换元素的可见性。是否触发动画或事件方法取决于传递的参数集。

于 2013-06-06T08:38:51.690 回答
0 
$('#buttontest').on("click",function(e)
{  
 $('#LogoTest').toggle();
});

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

看演示

希望对你有帮助

于 2013-06-06T08:39:59.763 回答
0

使用以下代码：

$(document).ready(function () { 
    $('#buttontest').click(function() {
       $('#LogoTest').toggle('slow');
    }
 });
于 2013-06-06T08:40:03.667 回答
0

您可以使用以下代码：

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

请注意，上面的代码效果很好。但我不推荐它，因为 jQuery 的$(document).ready()速度变慢了。这是供您参考的文件。

因此，根据您应该选择替代 for $(document).ready()。

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

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

快乐探索:)

于 2013-06-06T08:52:23.260 回答
0

最好的方法是将按钮和图像包装在 div 元素中。尽管在这种情况下没有必要，但通过这种方式，您始终可以确保显示/隐藏正确的图像。只需logotest在图像中添加一个类名，您可以在单击带有类的按钮时使其显示/隐藏buttontest。

这是我的例子：http: //jsfiddle.net/7xhxq/

于 2013-06-06T09:25:58.113 回答