Question

我在图像映射中包含了重复的.fancybox类。

<map name="Map1" id="Map1">
  <area shape="rect" coords="609,235,834,335" href="about.html" class="fancybox" rel="iframe" />
  <area shape="rect" coords="649,546,807,565" href="info.html" class="fancybox" rel="iframe" />
  <area shape="rect" coords="670,566,781,582" href="help.html" class="fancybox" rel="iframe" />
</map>

<map name="Map2" id="Map2">
   <area shape="rect" coords="609,235,834,335" href="contact.html" class="fancybox" rel="iframe" />
   <area shape="rect" coords="649,546,807,565" href="comments.html" class="fancybox" rel="iframe" />
</map>

然后我在jQuery中有一个数组，我想在其中添加Title属性。我知道它可以添加到HTML中，但我需要它由这个数组客户端提供，因为图像映射是由我无法编辑的服务器端CMS生成的。

$(document).ready(function() {
    var mapDetails = [   
        //Map1   
        "About Page",
        "Information",
        "Get Help",
        //Map2
        "Contact Me",
        "Post Comments"
        ]; 

   $('.fancybox').each(function() {
    $(this).attr('title', mapDetails[$(this).index()]); 
   })
});

我遇到的问题是，在Map2上，它再次从数组的开头开始，而不是作为页面上的第四个.fancybox在数组中进行。我假设它是因为他们有不同的父元素。我可以获取所有.fancybox元素，从数组中为它们分配标题并使用jQuery更新HTML，以便页面上的所有.fancybox类都按照它们出现的顺序从数组中分配出来吗？

我也尝试使用'area'选择器，结果相同：

   $('area').each(function() {
    $(this).attr('title', mapDetails[$(this).index()]); 
   })

Answer 1

由于您在没有参数的情况下调用index()，因此它返回每个元素相对于其兄弟元素的索引。因此，当从一个<map>元素转到另一个元素时，该索引将“重置”。

您可以使用each()提供的index参数代替：

$(".fancybox").each(function(index) {
    $(this).attr("title", mapDetails[index]);
});

这样，索引将为每个元素保持递增，并且不会在地图之间重置。

Answer 2

您应该使用index

的each()

   $('.fancybox').each(function(index, el) {
      $(this).attr('title', mapDetails[index]); 
   })

如何获取元素类，从数组中分配它们并在jQuery中将它们作为属性返回？

2 个答案: