我需要什么

• 我需要在事件点击时切换图像。
• 类似 Stack Overflow 星号的情况。

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

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 + '")');

        }
        });

}

问题

• 我需要在点击函数 fav() 时切换图像。

• 我面临的问题是，我在谷歌上搜索，虽然找到了 toggleclass，但它在这种情况下不起作用。

• 我找到了有用的代码

   // 在 CSS 中
  .favourate_dextop{
  background: url("http://im.gifbt.com/images/star1_phone.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  显示：块；
  浮动：右；
  高度：19px；
  宽度：18px；
  }
  
  .favourate_dextop：悬停{ background：url("http://im.gifbt.com/images/star1_phonehover.png") 无重复滚动 0 0 rgba(0, 0, 0, 0);}
  
  .favourate_dextops{
  background：url("http://im.gifbt.com/images/star1_phone.png") 无重复滚动 0 0 rgba(0, 0, 0, 0);
  显示：块；
  浮动：右；
  高度：19px；
  宽度：18px；
  }
  
  .favourate_dextops:hover{ background: url("http://im.gifbt.com/images/star1_phonehover.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
  
  // 在 JS 中
  // 根据 imageUrl 的值，确定要删除的类和要添加的类。
  $(pointer).closest('.evt_date').find('.favourate_dextop').removeClass('favourate_dextop').addClass('favourate_dextops');
  

• 此代码也不起作用。

• 只有当单击图像时，此代码才会起作用一次，背景图像只会改变一次，但我需要切换图像网址。

更新代码

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

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

});

我面临的问题：

• 从 href 切换不起作用。

js fiddle：我已更新我的 fiddle：一些更改： http://jsfiddle.net/48Lq3u60/20/