Question

我基本了解.each（）是如何基于jquery文档中的whats工作的，但我真的不明白如何将它应用于具有大量元素的东西。我有一张使用SVG制作的地图。目前，地图的每个部分都在onmouseover功能上亮起。

      $('.shape').mouseover(function(){
    // $('.shape').css({fill:#5df8b8;})
    shape_id = $(this).attr('id');
    console.log($(shape_id));
    $("#" + shape_id).css("fill", "#5df8b8");
    $('.hidden').each(function(i){
      //show each div on hover over 
    });


  });
  $('.shape').mouseleave(function(){
    console.log("you left a zip");
     $('.shape').css("fill", "white");
     $('.hidden').hide();
  });

我为地图的每个部分都有一个div。每个div包含有关该区域的信息。我希望能够根据您在地图上悬停的位置进行每个div显示是否有比这种情况更好的.each（）？

Answer 1

mouseover和mouseleave事件中对元素的“this”引用是指触发事件的div。您可以使用它而无需循环遍历地图中的所有div。见下面的代码。我创建了一个示例fiddle，这是一个工作示例。

<div class="transparent"><img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" /></div>
<div class="transparent"><img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" /></div>
<div class="transparent"><img src="https://ssl.gstatic.com/images/logos/google_logo_41.png" /></div>


$("div").bind("mouseover", function(el, a){
$(this).removeClass("transparent")
})
.bind("mouseleave", function(el, a){
$(this).addClass("transparent")
})

如何使用JQuery .each（）迭代47个div？

1 个答案: