Question

我有一个页面，其中A图像在B图像上。当页面加载时，我使用toggle()方法隐藏了一个图像。我想点击一个按钮在B图像上重新显示这个A图像。但单击该按钮时，此图像不会显示在B图像上。我认为A图像将在B图像下。我该如何显示图像？

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

Answer 1

从您在问题中刚刚提出的切换（）开始，我会尽力猜测并说您正在尝试使用jQuery实现此目的。

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

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

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

＆＃34; data-pic-src＆＃34;用于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 ).

   });

});

这可能有助于获得你想要的东西。

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

2 个答案: