jquery asp.net悬停框，用于在代码后面创建的多个div进入文字控件

I'm trying to draw a map and I have a List of a village object. And I work out the view window of the map then loop through each co-ordinate checking to see if a village exists there from a database. If one does, I draw the village. What I really would like is to be able to to have a jquery hover menu when hovering over each village.

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

At the moment I have it so when you hover over a village, all the hover menus show for every village, because of course they all share the same image id and hover menu ids. But if I change them to be unique ids, how can I make the hover boxes for every village?

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

This is my code at the moment (I'm looping through and writing to a literal control)

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

Map.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>";

Map.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>

Any help would be greatly appreciated!

任何帮助将不胜感激!

1 个解决方案

#1

This can be fixed with a better selector. As you are seeing, $('.villagehover') is selecting all of the hover divs. In jQuery, this is set to the selected element (within the hover function), so you can get the correct hover div by using

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

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

Also remember that you can only have one id="villagehover" per page.

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