Question

我正在尝试为我的RadComboBox中的项添加功能，类似于youtube注释。当你留下评论时，你会看到一组按钮出现。这是一个很酷的功能，我正在尝试实现类似的功能。我正在使用asp.net和C＃。

我不想使用Jquery，只是标准的JS。

HTML：

<ItemTemplate>
        <table width="100%">
            <tr onmouseover="ShowContent('buttonDiv'); return true;" onmouseout="HideContent('buttonDiv'); return true;" id="parentrow">
                <td style="width:45px;"><asp:Image runat="server" ID="img_Avatar" /></td>
                <td style="width:280px;"><asp:Literal runat="server" ID="lbl_literal"></asp:Literal></td>
                <td style="width:80px;"><div id="buttonDiv" style="display:none;">
                        <asp:Button ID="requestFriend" runat="server" Text="Fr" />
                        <asp:Button ID="groupInvite" runat="server" Text="Gr" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3" style="height:1px; border-bottom:1px solid #d2d2d2;"></td>
            </tr>
        </table>
    </ItemTemplate>

JavaScript的：

<script type="text/javascript" language="JavaScript">
var cX = 0;
var cY = 0;
var rX = 0;
var rY = 0;

function UpdateCursorPosition(e) {
    cX = e.pageX;
    cY = e.pageY;
}

function UpdateCursorPositionDocAll(e) {
    cX = event.clientX;
    cY = event.clientY;
}
if (document.all) {
    document.onmousemove = UpdateCursorPositionDocAll;
}
else {
    document.onmousemove = UpdateCursorPosition;
}

function AssignPosition(d) {
    if (self.pageYOffset) {
        rX = self.pageXOffset;
        rY = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) {
        rX = document.documentElement.scrollLeft;
        rY = document.documentElement.scrollTop;
    }
    else if (document.body) {
        rX = document.body.scrollLeft;
        rY = document.body.scrollTop;
    }
    if (document.all) {
        cX += rX;
        cY += rY;
    }
    d.style.left = (cX + 10) + "px";
    d.style.top = (cY + 10) + "px";
}

function HideContent(d) {
    if (d.length < 1) {
        return;
    }
    document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
    if (d.length < 1) {
        return;
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = "block";
}

function ReverseContentDisplay(d) {
    if (d.length < 1) {
        return;
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    if (dd.style.display == "none") {
        dd.style.display = "block";
    }
    else {
        dd.style.display = "none";
    }
}
</script>

当我填充我的组合框时，每行的ID都不同。所以，我总是把它当作第一个显示其按钮的项目。我怎样才能确保显示正确的div的ID？我知道它可能与ClientID有关，但我的JS知识非常简单。

Answer 1

我不确定我是否完全明白你的问题，但我会对它进行一次检查：

您不必总是使用“getElementById”传递对象。您可以做的是对于表中的每一行，以编程方式附加“onmouseover”和“onmouseout”事件。它会根据您当前的结构看起来像这样：

window.onload = function () {
   var rows = document.getElementsByTagName('tr');
   for (i in rows){ 
      if (rows[i].nodeType == 1){
          var thisRow =rows[i];
          thisRow.addEventListener("mouseover",ShowContent(thisRow.lastChild.firstChild),false);
          thisRow.addEventListener("mouseout",HideContent(thisRow.lastChild.firstChild),false);
      }
   }
}

在胡扯其“父”表格时显示/隐藏div

1 个答案: