用户单击图像时，将图像从加号切换为减号 [英] switch image from plus to minus when user clicks image

问题描述

在 http://www.stephencarlwillis.com 网站上，点击隐藏后会看到两张图片隐藏视频。

At this site http://www.stephencarlwillis.com you will see two images after clicking "hide" to hide the video.

图像是加号和减号。图像的默认值应为加号，表示用户在单击时展开。然后图像在点击后显示减号。

The images are a plus and minus sign. The default for the images should be a plus sign which would indicate to the user to expand when clicked. Then the images show a minus sign after they are clicked.

我无法弄清楚如何在用户点击图像后使图像返回到加号图像第二次，图像从加号到负号来回切换。

What I cannot figure out is how to make the image go back to the plus image after the user clicks the image a second time that way the image toggles back and forth from plus to minus.

以下是我必须进行图像切换的代码示例，但无法获取图像切换回加号。

Here is the example of the code I have to make the image switch, but cannot get image to switch back to plus sign.

$('#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;
});
});

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

Here is the code I am testing to try and switch or toggle between the plus and minus images.

$(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。

Here is the html for the jquery.

 <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>

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

Thank you for all your help. I have been trying to figure this out for a week now.

推荐答案

试试这个

DEMO

DEMO

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

this will work only in jquery version below 1.9.1

$('.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

new edited DEMO

希望这会有所帮助，谢谢

Hope this helps,Thank you

这篇关于用户单击图像时，将图像从加号切换为减号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！