我想在 JavaScript 中使用 jQuery 将图像替换为另一个图像。它是一个在线巴士预订网站。因此,当单击可用图像时,它应该变为不可用图像。有谁知道这件事。
问问题
751 次
2 回答
0
有很多方法,这里有一些。
<img id="bannerLogo" src="/path/to/image/logoup.png" />
<script type="text/javascript">
var imageCounter = 0;
$('#bannerLogo').click(function(){
if(imageCounter%2==0){
$('#bannerLogo').attr('src', '/path/to/image/logodown.png');
}
else {
$('#bannerLogo').attr('src', '/path/to/image/logoup.png');
}
imageCounter++;
});
</script>
或者
(注意 - 从 jQuery 1.7 开始,不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。)
<img class="swapper" src="imagename_off.jpg" />
<script type="text/javascript">
$(function(){
$(".swapper").live('click', function() {
if ($(this).attr("class") == "swapper") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
我希望这有帮助。
我还会添加我的悬停脚本,以防万一您在某些时候需要它:
$('#bannerLogo').hover(
function() { $('#bannerLogo').attr('src', '/path/logodown.png');},
function() { $('#bannerLogo').attr('src', '/path/logoup.png');
});
不要忘记包含 JQuery 库
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
谢谢,菲利普
于 2013-01-28T23:22:33.593 回答
0
你可以这样做:
$('#myImage').on('click', function(e) {
var image = this;
img.src = '/path/to/another/image.png';
});
此外,如果您有一堆需要交换的图像,最好使用事件委托。让我们假设这些可交换的图像可以在页面上的任何位置,并且您swappable
为它们分配一个类。然后,您可以只设置一个事件处理程序来处理交换,即使您使用 AJAX 动态添加新图像:
$(document).on('click', 'img.swappable', function(e) {
var image = this;
image.src = getAvailableImageUrl();
});
于 2013-01-28T23:03:15.367 回答