鼠标单击时使用 JQuery 进行图像交换
Image swapping using JQuery on mouse click
我想在JavaScript中使用jQuery将图像替换为另一个图像。这是一个在线巴士预订网站。因此,当单击可用图像时,它应该变为不可用图像。有谁知道这件事。
你可以做这样的事情:
$('#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();
});
有很多方法,这里有一些。
<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
谢谢菲利普
相关文章:
- 使用javascript onclick下拉菜单进行图像交换
- 用较大的图像交换缩略图
- Javascript中的图像交换
- 打开和关闭的图像交换未在正确的时间更改
- 创建随机图像交换并禁止鼠标悬停事件
- Javascript内存游戏-图像交换
- 链路翻转时的 DIV 背景图像交换
- 弗兰肯斯坦图像交换JavaScript需要整洁和可能的自动化
- 如何在滑块中使用比较浏览器窗口大小的函数将图像交换到另一个图像
- JavaScript 鼠标悬停图像交换问题
- 图像交换单击jquery,3张图像
- 使用 JQuery 进行图像交换之间的定时转换
- 从固定的服务器时间启动图像交换JavaScript
- 如何使用表单和javascript进行图像交换
- 图像交换在Firefox中不起作用,但在Chrome和IE中有效
- 尝试将随机图像与其他随机图像交换
- OO Javascript 调试 - 使用传输进行图像交换
- jQuery图像交换if-else语句不起作用
- chrome扩展弹出窗口中的图像交换
- Javascript图像交换是't工作