Jquery 单击/Bind/Unbind-交互式地图处理程序在浏览器和iPad上工作

我已经使用基本地图和区域标记创建了一个图像地图。我已经测试了地图，所有的区域都按照预期的方式运行，所以HTML绝对正确

单击某个区域时，地图图像的源将替换为另一个。 当然，当再次单击时，贴图源应该恢复到其原始状态。 这基本上是一个单击/取消单击类型的事件，我正在尝试使用

.bind（）

来执行取消单击。出于某种原因，它似乎不起作用

代码如下：

我用mouseover/mouseout测试了这个功能，而不是单击并解除绑定，效果很好，但当然这对iPad不友好。但当我尝试这样做时，只有单击有效，然后第二次单击该区域时，什么也没有发生

我怀疑我实现.unbind（）的方式有问题

谢谢你帮助jquerynoob

更新

起初的

.unbind

事件将一起删除单击事件。使用当前代码，一旦图像被单击一次，它将删除单击事件，并且不可单击。。。永远，悲伤的时刻！尝试切换图像src，如下所示：

$(document).ready(function()
{
    var images = ['http://www.doggyplanet.co.uk/images/new-icon-images/Dog-cartoon.png', 'http://s.thumbs.canstockphoto.com/canstock2134964.jpg'];
    $('#area1').click(function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != images[0] ? images[0] : images[1];

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
});​

---

第二种可能更好的方法是在

data altsrc

属性中存储一个备用映像地址，并使用

.attr（'src'，…）

和

.data（'altsrc'，…）

在单击时切换这两个地址。这样，代码更加通用，可以在不重写的情况下重复使用任何类似的图像。@Blazemonger我并不是说这不容易，但我确实提到了我是一个noob，所以我不知道如何以及如何替换这两个…@Blazemonger！但是，单击事件位于图像上。：）@Blazemonger，还有一个更通用的按钮点击器。@Richard我知道这是离题的，但看到广告你帮了大忙-现在能给图像添加淡入淡出效果吗，这样彼此之间的过渡就不会那么突然了？

$(document).ready(function()
{
    var images = ['http://www.doggyplanet.co.uk/images/new-icon-images/Dog-cartoon.png', 'http://s.thumbs.canstockphoto.com/canstock2134964.jpg'];
    $('#area1').click(function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != images[0] ? images[0] : images[1];

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
});​