Question

我目前正在使用放大镜插件来放大设置为图像地图的大型组织图片。通常，当用户点击该图像映射的一部分时，它们被重定向，遗憾的是我找不到允许放大镜响应用户点击图像映射上的链接的方法。任何建议将不胜感激！

谢谢！

Answer 1

我不熟悉那个特定的插件，但是你不能简单地附加你自己的click事件处理程序吗？

鉴于此标记（基于the plugin's GitHub repo处的演示）：

<div>
    <a class="demo" href="path/to/some/url">
        <img src="path/to/image" width="191" height="240" />
    </a>
    <img class="demo" src="path/to/image" width="191" height="240" />
</div>

您可以附加这样的点击处理程序：

$(function(){
    $('a.demo').on('click', function(e){
        // prevent the link from going anywhere (if that's what you want)
        e.preventDefault();

        // do something else...
        alert('The Loupe link was clicked!');
    });
});

编辑添加，如果您正在使用图像映射，您只需将点击事件处理程序附加到<area>元素，如下所示：

$('area').on('click', function(e){
    // stuff here
});

Answer 2

这是一个老问题，但答案很简单： -

只需将事件监听器附加到班级.loupe

即可

$('.loupe').on('click', function (e) {
  e.preventDefault();
  alert('The Loupe link was clicked!');
});

Answer 3

如果你想让loupe转到原始img标签的锚标签父，那么试试这个，如果不起作用，给所有原始图像添加一个类，然后在img之前添加到选择器。

$('.loupe').click(function(){   
      $("img[src='"+$(this).find('img').attr('src')+"']").parent()[0].click();
});

jQuery放大镜和点击事件

3 个答案: