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

Assign attributes to an image from the id of another element with JQuery

本文关键字：图像 分配 属性 id JQuery 另一个 元素 使用      更新时间：2023-09-26

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

<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 标签上使用地图，我应该添加属性 usemap，例如在列表的第一个元素中

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

为了获取地图的id，我用JQuery做了以下工作 

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

用

console.log($mapid);

结果如下

  • 地图一
  • 地图二
  • 地图-三

但是现在我不知道为每个图像分配usemap属性，此属性的值是用于坐标的地图的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>

您可以使用 .attr(( 的 setter 版本，然后您可以返回下一个元素(即map元素(的 id，

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

演示：小提琴

你不需要中间变量。你可以只获取前面的img元素并直接设置它的 id：

$('.slides li map').each(function () {
    $(this).prev('img').attr('id', '#' + this.id);
});
相关文章：