用jQuery改變圖像點擊不起作用

我在用jQuery改變圖像時遇到了麻煩。我有以下的標記：用jQuery改變圖像點擊不起作用

<div class="row"> 
    <img src="image.png" class="download-image regular-image" /> 
    <div class="options"> 
     <p>download</p> 
    </div> 

    <img src="image.png" class="download-image regular-image" /> 
    <div class="options"> 
     <p>download</p> 
    </div> 
</div>

和下面的代碼來處理這些標記：

$('.regular-image').hover(function() { 
    $(this).attr('src', 'image2.png'); 
}. function() { 
    $(this).attr('src', 'image.png'); 
}

此代碼是非常straightfoward和我都沒有問題，但最近我介紹了另一個功能，以保持活動圖像（即，一個，顯示向上如果點擊元素）：本塊後面

$('.download-image').click(function(e) { 
    e.stopPropagation(); 
    $(this).next().toggle(); 
    $('.download-image').removeClass('current'); 
    $(this).addClass('current'); 
    if ($('.download-image').hasClass('current')) { 
     $(this).hover(function() { 
       $(this).attr('src', 'image2.png'); 
     }, function() { 
       $(this).attr('src', 'image2.png'); 
     } 
    } 
}

思想很簡單 - 我添加了一個current類跟蹤當前正在活動的元素，然後使用代表活動狀態的image2.png使其元素圖像在懸停和鼠標移出時保持不變。它可以工作，但是當我點擊另一個元素時，以前點擊過的元素不會像常規元素那樣工作（即，它保持懸停時的image2.png屬性，而不是像.regular-image類中的編碼那樣操作）。我做錯了什麼？我覺得solutio可能會很簡單直接，但我自己找不到。任何幫助或想法將不勝感激！謝謝你獻給你時間，祝你有美好的一天。

UPD

要總結一下我的帖子，我想在那一刻達到是改變image2.png回image.png點擊其他圖像時，使其行爲類似於JavaScript代碼描述.regular-image（去改變它到image2.png而徘徊和image.png而鼠標離開）

UPD 2

與其他開發者的幫助我米幾乎有我想要的行爲。我改變click事件給這個：

$(".download-image").click(function (event) { 
    event.stopPropagation(); 
    $(this).next().toggle(); 
    $('.download-image').removeClass('current'); 
    $(this).addClass("current"); 
    $(document).delegate('.current','mouseover',function() { 
     $(this).attr("src", "/image2.png"); 
    }); 
    $(document).delegate('.current','mouseout',function() { 
     $(this).attr("src", "/image2.png"); 
    }); 
});

它的工作原理，但只有當我明確地懸停和鼠標的影像上，但我每次都要更改image2.png回image.png當我點擊其他圖像。

來源

2017-06-20 Vadim Novozhilov

請不要在此處添加答案到您的問題中，也不要將[解析]設備添加到標題 - 我們不這樣做。每個問題末尾都有一個按鈕，可讓您自行回答。謝謝！ – halfer

看起來你在代碼中有錯誤。請檢查下面提到的代碼。

$('.regular-image').hover(function() { 
    $(this).attr('src', 'image2.png'); 
}, function() { 
    $(this).attr('src', 'image.png'); 
});

如果你通過ajax調用添加圖像，然後使用下面提到的代碼。

$(document).on('.regular-image','hover',function() { 
    $(this).attr('src', 'image2.png'); 
}, function() { 
    $(this).attr('src', 'image.png'); 
});

數據元素

<img data-default-image='image1.png' src='image1.png' /> 

$(document).delegate('button','click',function(){ 
    $(this).closest('img').attr('src',$(this).closest('img').data('default-image')); 
});

來源

2017-06-20 07:18:00

只需提及，'.delegate（）'已被棄用。如果jQuery版本是1.7+，需要使用'.on（）'方法 –

對不起，但這種方法對我不起作用。我確實使用了大於1.7的jQuery，並嘗試使用'.on（）;'方法。 –

@PrashantShirke，謝謝你提醒我。我已經更新了我的答案。 –

嘗試使用

e.preventDefault();

，而不是

e.stopPropagation();

也是我直言不明白什麼是你想通過做以下代碼：

$(this).hover(function() { 
       $(this).attr('src', 'image2.png'); 
     }, function() { 
       $(this).attr('src', 'image2.png'); 
     }

你確定應該有兩個相同的行嗎？

來源

2017-06-20 07:25:21 Grinzzly

不幸的是'preventDefault（）'不適用於我，我只能用'.stopPropagation（）;'方法調用下一個元素（'.options' div）。當涉及到您提到的代碼時，我將其用作當前狀態表示的一部分，例如假設「image.png」是灰色的而「image2.png」是藍色的。我嘗試了其他的方式來實現它，但只有那個爲我工作 –

（發表於OP）。

我發現了一種獲取行爲的方法，通過在刪除.current類時同時更改src屬性。我的代碼現在看起來像這樣：

$(".download-image").click(function (event) { 
    event.stopPropagation(); 
    $(this).next().toggle(); 
    $('.download-image').removeClass('current').attr('src', 'image.png'); 
    $(this).addClass("current"); 
    $(document).delegate('.current','mouseover',function() { 
     $(this).attr("src", "image2.png"); 
    }); 
    $(document).delegate('.current','mouseout',function() { 
     $(this).attr("src", "image2.png"); 
    }); 
});

來源

2017-06-26 21:01:52 halfer

用jQuery改變圖像點擊不起作用

回答

相關問題