0

根据 jquery 文档中的内容，我对 .each() 如何工作有一个基本的了解，但我真的不明白如何将它应用于具有大量元素的东西。我有一张使用 SVG 制作的地图。目前地图的每个部分都会在鼠标悬停功能上亮起。

      $('.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() 更好的东西？

4

1 回答 1

0

mouseover 和 mouseleave 事件中对元素的“this”引用是指触发事件的 div。您可以使用它而不必遍历地图中的所有 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 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")
})
于 2013-05-12T19:18:53.917 回答