将鼠标悬停事件绑定到 asp.net 中继器

Question

我有一个显示标题和图像的 asp.net 转发器。 标题很长，所以我想在鼠标悬停时再次显示标题。

我尝试实现鼠标悬停，但遇到以下问题。

我的显示如下：

  Repeater Element 1  Repeater Element 2
  Title 1             Title 2 
  Image 1             Image 2

现在在 Element1 上进行鼠标悬停时，我的鼠标悬停显示 Title1。 在 Element2 上进行鼠标悬停时，我的鼠标悬停再次显示 Title1 ，我希望它 显示标题2？谁能指出我如何做到这一点。

我的代码如下：

<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
                                            <ItemTemplate>
                                           <asp:Panel ID="Pnl" runat="server" onmouseover="return showsamplepopup();" onmouseout="return hidesamplepopup();">
                                                    <li class="ui-widget-content ui-corner-tr">
                                                        <h5 class="ui-widget-header">
                                                            <%# Eval("Name").ToString().Length > 9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
                                                        </h5>
                                                        <div id="popup" style="position: absolute; width: 80px; height: auto; background-color: Lime;
                                                            border-bottom: solid 3px gray; display: none; border-right: solid 3px gray; display: none;">
                                                            <%#Eval("Name")%>
                                                        </div>
                                                        <div class="center">
                                                            <asp:Image Width="50px" ID="btnPerformanceImage" runat="server" Height="28px"></asp:Image>
                                                        </div>
                                                    </li>
                                                </asp:Panel>
                                            </ItemTemplate>
                                        </asp:Repeater>

javascript函数如下：

function hidesamplepopup() {
            document.getElementById('popup').style.display = 'none';
            return false;
        }
        function showsamplepopup(e) {
            e = (e) ? e : window.event;
            var element = (e.target) ? e.target : e.srcElement;
            var left = element.offsetLeft;
            var top = element.offsetTop;
            while (element = element.offsetParent) {
                left += element.offsetLeft;
                top += element.offsetTop;
            }
            document.getElementById('popup').style.display = 'block';
            document.getElementById('popup').style.left = left;
            document.getElementById('popup').style.top = top;
            return false;
        }

Answer 1

我不知道你的要求是什么。如果您使用 jQuery 工具提示，它可能会容易得多。

这只是一种替代方法。

<link rel="stylesheet" 
 href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(function () {
        $(document).tooltip();
    });
</script>

<asp:Repeater ID="rptMonitorSummary" runat="server" 
    OnItemDataBound="rptMonitorSummary_OnItemDataBound">
    <ItemTemplate>
        <asp:Panel ID="Pnl" runat="server">
            <li class="ui-widget-content ui-corner-tr">
           <h5 class="ui-widget-header" title="<%# Eval("Name").ToString() %>">
                    <%# Eval("Name").ToString().Length > 9 ? 
                   (Eval("Name").ToString()).Substring(0, 9) : Eval("Name")%>
                </h5>
                <div class="center">
                    <asp:Image Width="50px" ID="btnPerformanceImage" 
                      runat="server" Height="28px"></asp:Image>
                </div>
            </li>
        </asp:Panel>
    </ItemTemplate>
</asp:Repeater>

Answer 2

请注意，getElementById 将返回具有该 ID 的第一个元素。而且您为您的 Div 使用相同的 ID。

您应该为转发器的每个项目使用不同的 ID（为每个项目生成不同的 ID），或者更改您的逻辑以通过其他属性获取它们。我也强烈推荐使用 jQuery。

Answer 3

我会改变你将事件绑定到元素的方式，因为你的示例代码不使用 jQuery，我假设你不想要它:)

首先，您需要向 asp:panel 添加一个类，以便通过某种方式识别和选择所有实例。此外，您需要为弹出窗口使用类而不是 ID，因为 ID 在页面上应该是唯一的。

然后您可以执行以下操作：

var elements = document.querySelectorAll('.thatClassYouAdded'),
i = 0, l = elements.length;

for(;i<l;i++)
{
    elements[i].addEventListener('mouseover', function(e) {
        var popup = this.querySelector('.popup');
        //do some stuff to popup
    });
}

还需要注意的是，旧版浏览器不支持 querySelector（有关更多信息和支持表，请参阅https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector），并且较旧的 IE（9 之前）使用 attachEvent 而不是 addEventListener，您可能需要编写额外的代码来支持