javascript - 使用 JQuery 从另一个元素的 id 为图像分配属性

Question

我有一个列表，列表中的每个项目都包含图像和 map

<ul class="slides">
<li>
  <img src="slide1.jpg" />
  <map id="map-one"></map>
</li>
<li>
  <img src="slide2.jpg" />
  <map id="map-two"></map>
</li>
<li>
  <img src="slide3.jpg" />
  <map id="map-thre"></map>
</li>

要在 img 标签上使用 map ，我应该添加属性 usemap，例如在列表的第一个元素中

<li>
  <img src="slide1.jpg" usemap="#map-one" />
  <map id="map-one"></map>
</li>

为了获取 map 的 id，我使用 JQuery 完成了以下操作

var $mapid;

$('.slides li map').each(function(i, elem) {
  var $this = $(this);
  $mapid = $this.attr('id');
});

使用

console.log($mapid);

结果如下

• map 一
• map 二
• map 三

但现在我不知道如何为每个图像分配 usemap 属性，并且该属性的值是用于坐标的 map 的 id。

像这样

<ul class="slides">
<li>
  <img src="slide1.jpg" usemap="#map-one" />
  <map id="map-one"></map>
</li>
<li>
  <img src="slide2.jpg" usemap="#map-two" />
  <map id="map-two"></map>
</li>
<li>
  <img src="slide3.jpg" usemap="#map-thre" />
  <map id="map-thre"></map>
</li>

Answer 1

您可以使用 .attr() 的 setter 版本，那么您可以返回前缀为 #

的下一个元素(即 map 元素)的 id

$('.slides li img').attr('usemap', function (i, elem) {
    return '#' + $(this).next().attr('id')
});

演示:Fiddle