1

在此站点http://www.stephencarlwillis.com单击“隐藏”以隐藏视频后，您将看到两个图像。

图像是加号和减号。图像的默认值应该是一个加号，它会指示用户在单击时展开。然后图像在单击后显示一个减号。

我无法弄清楚的是如何在用户第二次单击图像后使图像返回到正图像，这样图像在正负之间来回切换。

这是我必须进行图像切换但无法让图像切换回加号的代码示例。

$('#leftcolumn').hide();
$('#2d').hide();
$('#development').hide();
$('#right').hide();
$('#right2').hide();

$(function() {
$('.img2').click(function(){
$(".img2").attr('src',"assets/images/close.png");
$('#right2').toggle("fast");
$('#development').toggle("fade");
return false;
});
});

这是我正在测试的代码，用于尝试在正负图像之间切换或切换。

$(function() {
$('.img1').click(function() {
$('#right').toggle("fast");

if ($('.img1').is(':visible')) {
  $(this).attr('src',"assets/images/close.png");
 }else{
  $(this).attr('src',"assets/images/open.png");
 }
});
});

这是jquery的html。

 <div id="leftcolumn"> 
 <h1>Stephen Carl Willis:<br> 
 Web Developer/Designer</h1> 

<img src="<?php echo base_url();?>/assets/images/open.png" alt="2d" class="img1">2D</>
<img src="<?php echo base_url();?>/assets/images/open.png"     alt="2d"class="img2">Development</>

<div id="right">
<div id="2d">
2D graphic design coming soon.
</div><!--2d-->
</div>
<div id="right2">
<div id="development">
<p>Development portfolio coming soon.</p>
</div>
</div> 


</div>

谢谢你的帮助。一个星期以来，我一直在努力解决这个问题。

4

1 回答 1

0

尝试这个

演示

这仅适用于 1.9.1 以下的 jquery 版本

$('.img2').toggle(
  function(){ $(this).attr("src", "assets/images/close.png"); },
  function(){ $(this).attr("src", "assets/images/open.png"); }
);

尝试这个

$(document).ready(function() { 
   var open=true;    
  $('.img2').click(function() {
    $(this).attr('src', function(i, oldSrc) {
        return oldSrc == 'assets/images/close.png' ? 'assets/images/open.png' : 'assets/images/close.png';
    });
      
      if(open==true)
       {
          // do what you want

            open=false;
       }
       else
       {
        // do what you want

            open=true;
       }

   });
});

新编辑的DEMO

希望这有帮助，谢谢

于 2013-08-31T17:20:10.470 回答