Question

在此网站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>

感谢您的帮助。我一直试图解决这个问题一周。

Answer 1

试试这个

<强> DEMO

这只适用于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

希望这有帮助，谢谢

用户单击图像时，将图像从加号切换为减号

1 个答案: