1

我正在尝试绘制地图,并且我有一个村庄对象的列表。然后我计算出地图的视图窗口,然后循环检查每个坐标,以查看数据库中是否存在村庄。如果有,我画村庄。我真正想要的是在每个村庄上空悬停时能够有一个 jquery 悬停菜单。

目前我有它,所以当你将鼠标悬停在一个村庄上时,每个村庄的所有悬停菜单都会显示,因为它们当然都共享相同的图像 ID 和悬停菜单 ID。但是,如果我将它们更改为唯一的 ID,我怎样才能为每个村庄制作悬停框?

这是我目前的代码(我正在循环并写入文字控件)

地图.aspx.cs

MapLiteral.Text = "";
    MapLiteral.Text += "<table cellpadding=\"0\" cellspacing=\"0\">";

    for (int i = minx; i <= maxx; i++)
    {
        MapLiteral.Text += "<tr>";
        for (int j = miny; j <= maxy; j++)
        {
            MapLiteral.Text += "<td width\"50px\" height=\"50px\" style=\"border: solid 1px #2d5c25;\">";
            if (Objects.Village.VillageExists(i, j))
            {
                Objects.Village village = new Objects.Village();
                village = Objects.Village.GetVillage(i, j);
                MapLiteral.Text += "<div class=\"village\"><img src=\"/Images/Map/Village1.gif\" /></div>";
                MapLiteral.Text += "<div class=\"villagehover\" id=\"villagehover\">test</div>";
            }
            else
            {
                MapLiteral.Text += "<img src=\"/Images/Map/Grass.gif\" />";
            }
            MapLiteral.Text += "</td>";
        }
        MapLiteral.Text += "</tr>";
    }

    MapLiteral.Text += "</table>";

地图.aspx

<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $(".villagehover").hide()
        $(".village").hover(
  function () {
      $('.villagehover').stop().fadeTo("slow", 0.33);
  },
  function () {
      $('.villagehover').stop().fadeOut("slow");
  }
);

    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<center>
    <h2>
        Map (<asp:Label ID="XTitleLabel" runat="server" />,
        <asp:Label ID="YTitleLabel" runat="server" />)
    </h2>
     <asp:Literal ID="MapLiteral" runat="server"></asp:Literal>

任何帮助将不胜感激!

4

1 回答 1

0

这可以通过更好的选择器来解决。如您所见,$('.villagehover')正在选择所有悬停 div。在 jQuery 中,this设置为所选元素(在悬停功能内),因此您可以通过使用获得正确的悬停 div

$(this).parent().find('.villagehover')

id="villagehover"还要记住,每页只能有一个。

于 2012-09-09T04:04:07.407 回答