jquery：调用切换方法后，图像上的图像不会出现在屏幕上

Question

我有一个页面，其中 A 图像位于 B 图像之上。加载页面时，我使用 toggle() 方法隐藏了一个图像。我想通过单击按钮重新显示此 A 图像而不是 B 图像。但是当单击按钮时，此图像不会出现在 B 图像上。我认为 A 图像会在 B 图像之下。如何显示图像？

编辑：抱歉没有提供我尝试过的内容：jsfiddle.net/gtchoi/DTcHh/9364/

Answer 1

从您刚刚在问题中建议的 toggle() 中，我将做出最好的猜测，并说您正在尝试使用 jQuery 来实现这一点。

我们可以在不使用切换方法的情况下实现您的结果：

在你的 HTML 中你应该有这样的东西：

<img src="imagea.jpg" data-pic-src="imageb.jpg" alt="my picture">

“data-pic-src”用于 jQuery 理解，但是您的 html 不知道这是什么。它将用于使用 jQuery 切换我们的图像。

在你的 jQuery 中，你应该有这样的东西：

$(document).ready(function(){

   $('img').click(function(){

      var temp = $(this).attr('src');   
      $(this).attr('src', $(this).attr('data-pic-src'));
      $(this).attr('data-pic-src', temp);
    });

});

在 jQuery 中，我们只是在每次单击时交换 src 值。

Answer 2

$(document).ready(function(){
   // hide A image with css propert 'Display' : 'none'. here 

   $("#buttonOver").on('click',function(){

       // hide B image with css propert 'Display' : 'none'. here and set the ( 'z-index' : 'less' / 'opactity' : '0' ).

       // Show A image with css propert 'Display' : 'block'. here (you can make it with 'transition' property as well to show A image ).

   });

});

这可能有助于得到你想要的。