冷凝，而不是寫代碼，每個彈出

Question

我使用此代碼顯示彈出式窗口在懸停在一個站點區域的jQuery：

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()。