切换图片在jQuery中不起作用

Question

what i need

• i need to toggle image onclick of event.
• like stack overflow star similar case.

html

 <span itemprop="location"  itemscope itemtype="http://schema.org/Place">
            <div  style="display:block; float:right; width:auto; color:#7c7c7c;">


      <a href="javascript:void(0);" src="http://im.gifbt.com/images/star1_phone.png" class="favourate_dextop" id="fav'.$data[$k]['id'].'"  onClick=" favaorite(this)"></a>
                             </div>'

js code

function favorite(pointer)
        {
        $(".favourate_dextop").click(function(){
        if($(".favourate_dextop").attr("src") == "http://im.gifbt.com/images/star1_phone.png"){
        //$(pointer).closest('.evt_date').find('.favourate_dextop').attr("src", "http://im.gifbt.com/images/star1_phonehover.png");

        $(pointer).closest('.evt_date').find('.favourate_dextop').css('background-image', 'url("' + imageUrl + '")');
        alert("if");
        }
        else 
        {

        //$(pointer).closest('.evt_date').find('.favourate_dextop').attr("src", "http://im.gifbt.com/images/star1_phone.png");

        $(pointer).closest('.evt_date').find('.favourate_dextop').css('background-image', 'url("' + imageUrls + '")');

        }
        });

}

problem

• i need to toggle image on click of function fav().

• problem im facing i searched google though i found toggleclass though its not working in case.

• i found helpfull code

    // in CSS .favourate_dextop{ background: url("http://im.gifbt.com/images/star1_phone.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block; float: right; height: 19px; width: 18px; } .favourate_dextop:hover{ background: url("http://im.gifbt.com/images/star1_phonehover.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);} .favourate_dextops{ background: url("http://im.gifbt.com/images/star1_phone.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block; float: right; height: 19px; width: 18px; } .favourate_dextops:hover{ background: url("http://im.gifbt.com/images/star1_phonehover.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);} // in JS // based on value of imageUrl, determine what class to remove and what class to add. $(pointer).closest('.evt_date').find('.favourate_dextop').removeClass('favourate_dextop').addClass('favourate_dextops'); 

• this code is also not working.

• only this code works onetime when click on image changes background image only once, nut i need to toggle image urls.

updated code

   <div class="evt_date"  style="overflow:hidden" style="overflow:hidden" itemscope itemtype="http://schema.org/Event">

<a href="javascript:void(0);"  class="favourate_dextop" id="fav'.$data[$k]['id'].'"  onClick=" favaorite('.$data[$k]['id'].',\''.$name_event.'\',\''.$event_city.'\',\''.$event_country.'\',\''.$event_urls.'\',this)"></a>

js code

       var  image2='http://im.gifbt.com/images/star1_phonehover.png';
       var  image1='http://im.gifbt.com/images/star1_phone.png';

       var toggle = 1;


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

       if (toggle == 1) 
       {
        alert("toggle 1");
           $('.favourate_dextop').css('background-image', 'url("' + image2 + '")');

       //$("#bg").attr('src',image2);
       toggle = 0;
       }
else {
     alert("toggle 0");
                           $('.favourate_dextop').find('.favourate_dextop').css('background-image', 'url("' + image1 + '")');

       //$("#bg").attr('src',image1);
       toggle = 1;
       }

});

problem im facing:

• toggling from href is not working.

js fiddle: i have updted my fiddle : some changes : http://jsfiddle.net/48Lq3u60/20/

Answer 1

First of all you must improve your code....

To toggle image use:

$("#yourImage").attr('src', 'newlink');

Check a working example here

Using this as example you can toggle image like this:

NEW FIDDLE

Answer 2

Your best bet is to simplify things a bit. Try something like this:

HTML (not that your span is now a div...you shouldn't have spans wrapped around divs as that is bad syntax):

<div itemprop="location"  itemscope itemtype="http://schema.org/Place">
    <div class="img-wrap img1">
        <div class="img-swap"></div>
    </div>
</div>

CSS:

.img-wrap {
    display: block;
    float: right;
    width: auto;
    color: #7c7c7c;
}
.img-swap {
    float: left;
    width: ENTER WIDTH OF IMAGE;
    height: ENTER HEIGHT OF IMAGE;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.img-swap.img1 {
    background-image: url('pathtoimage1');
}
.img-swap.img2 {
    background-image: url('pathtoimage2');
}

jQuery:

jQuery('.img-wrap').click(function() { 
  jQuery(this).children('.img-swap').toggleClass('img1 img2');
});

You'll need to swap out the image paths and enter height and width for your container, but this probably a simpler approach and a bit cleaner.