包裝圖像映射<div></div>

Question

我在獲取.wrap和.wrapAll方法在我的圖像映射上工作時遇到了一些困難。我假設這是因爲地圖不像圖像或輸入標籤那樣自我關閉。

HTML：

<img class="img_class" id="bottle_map" src="../images/bottle.jpg" usemap="#bottle_map"> 
<map name="bottle_map"> 
    <area shape="rect" alt="" coords="3,6,258,31" href="1" title="Saranac Legacy IPA"> 
    <area shape="rect" alt="" coords="279,5,336,32" href="2" title="four generations"> 
    <area shape="rect" alt="" coords="2,37,425,64" href="2" title="four generations"> 
    <area shape="rect" alt="" coords="1,69,386,95" href="2" title="four generations"> 
    <area shape="rect" alt="" coords="243,121,444,142" href="3" title="Matt Brewing Company"> 
    <area shape="rect" alt="" coords="4,143,186,163" href="3" title="Matt Brewing Company"> 
    <area shape="rect" alt="" coords="194,144,400,163" href="4" title="Our (great) grandfather"> 
    <area shape="rect" alt="" coords="3,163,252,187" href="4" title="Our (great) grandfather"> 
    <area shape="rect" alt="" coords="295,166,419,185" href="5" title="it's still family"> 
    <area shape="rect" alt="" coords="3,189,363,209" href="5" title="it's still family"> 
</map> 

JS/jQuery的：

$.fn.setupV2 = function(map) { 
    map_ref = "map[attribute='"+ map + "']"; 
    img_ref = "img[usemap='\\#" + map + "']"; 
    $(map_ref).wrapAll('<div class="mapContainer"></div>'); 
}; 

基本上我想要的圖像和圖像映射包裝成一個div在一起，這樣我就可以插入一個帆布和CSS樣式。有沒有辦法在注入HTML或在HTML中完成之前做到這一點？

Answer 1

您需要調整您的選擇器，以便jQuery抓取地圖和img。像這樣的東西會工作：

$.fn.setupV2 = function(map) { 
    map_ref = "map[name='"+ map+"']"; 
    img_ref = "img[usemap='#" + map + "']"; 
    $(map_ref + ', ' + img_ref).wrapAll('<div class="mapContainer"></div>'); 
}; 

JS小提琴：https://jsfiddle.net/igor_9000/p0mLhecg/

我有一些困難得到了.wrap和.wrapAll方法來對我的圖像映射工作。我假設這是因爲地圖不像圖像或輸入標籤那樣自我關閉。

不完全是。您的map_ref和img_ref選擇器不匹配任何元素。你需要更新它們，以便它們匹配元素，並將它們都包含在jQuery選擇器中。

希望有幫助！