javascript - 如何将图像映射包裹在 中？

Question

我在使 .wrap 和 .wrapAll 方法在我的图像映射上工作时遇到一些困难。我假设这是因为 map 不会像图像或输入标签那样自动关闭。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

我想将图像和图像映射一起包装到一个 div 中，这样我就可以插入 Canvas 和 CSS 样式。除了注入(inject) HTML 或在 HTML 中完成之外，有没有办法做到这一点？

Answer 1

您需要调整选择器，以便 jQuery 获取 map 和 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 fiddle :https://jsfiddle.net/igor_9000/p0mLhecg/

I am having some difficulty getting the .wrap and .wrapAll methods to work on my image map. I am assuming this is because map does not self close like an image or input tag.

不完全是。您的 map_ref 和 img_ref 选择器不匹配任何元素。您需要更新它们，以便它们与元素匹配，并将它们都包含在 jQuery 选择器中。

希望有帮助!