切換圖片在jQuery中不起作用

Question

我需要的

• 我需要切換事件的圖像onclick。
• 像堆棧溢出之星類似的情況。

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（）來切換圖像。

• 我面臨的問題是我搜索了google，盡管我發現toggleclass卻無法正常工作。

• 我發現有用的代碼

    // 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'); 

• 此代碼也不起作用。

• 僅此代碼一次有效，當單擊圖像僅更改背景圖像一次時，我需要切換圖像URL。

更新的代碼

   <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小提琴：我更新了小提琴：一些更改： http : //jsfiddle.net/48Lq3u60/20/

Answer 1

首先，您必須改進代碼。

要切換圖像，請使用：

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

在這里查看工作示例

以這個為例，您可以像這樣切換圖像：

新產品

Answer 2

最好的選擇是簡化一些操作。 嘗試這樣的事情：

HTML（不是您的span現在是一個div ...您應該不要在div周圍包裹span，因為這是錯誤的語法）：

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

您需要換出圖像路徑並為容器輸入高度和寬度，但這可能是一種更簡單的方法，並且更干凈。