Question

我正在使用此代码在网站上的悬停区域显示弹出窗口：

HTML

<map id='_Image-Maps_1201306032036494' name='Image-Maps_1201306032036494'>
     <area shape='rect' coords='35,352,64,380' rel='one1'/>
</map>
<div id='one1' class='popBox'><div class='inside'><h4>Newspapers and mail piling up</h4><p><strong>Tip:</strong> When you go on vacation, call your local post office and newspaper provider to put your mail and newspaper delivery on hold. Or ask a reliable neighbor to pick it up for you.</p></div></div>

Jquery的

$('area[rel="one1"]').hover(
   function(){
   $('#one1').show();
   },function(){
   $('#one1').hide();
});

但是我有很多领域需要我这样做。区域rel始终与需要弹出的div上的ID相同。有没有一种方法可以设置它，所以每当你将鼠标悬停在图像地图上的某个区域上时，它会显示与该区域相同的rel的弹出窗口？

Answer 1

这是未经测试的，但我建议：

$('area[rel]').hover(function(){
    // you may find that this.rel works, instead of
    // '$(this).attr('rel'), but I've not tried it.
    $('#' + $(this).attr('rel')).show();
}, function(){
    $('#' + $(this).attr('rel')).hide();
});

Confirmed by Roko（在下面的评论中）使用this.rel有效，这比使用jQuery检索相同的值/属性便宜;而是给出了：

$('area[rel]').hover(function(){
    $('#' + this.rel).show();
}, function(){
    $('#' + this.rel).hide();
});

参考文献：

attr()。

压缩jQuery而不是为每个弹出窗口编写代码

1 个答案: