如何使用 javascript 访问中继器内的 Div

Question

简单地说，我在转发器中有一个锚点，它在点击一个 javascript 函数时触发，它将 Div 的 innerHTML 设置为某些内容。

在中继器之外尝试这个确实有效！ 但是如果我尝试在中继器的项目模板中实现相同的代码，它就行不通了！

注意：我想我需要先访问中继器，然后再访问其中的 Anchor！但我不知道该怎么做

进一步说明：

JavaScript 函数：

function show(ele, content) {
    var srcElement = document.getElementById(ele);
    if (srcElement != null) {
        srcElement.innerHTML = content;
    }
}

转发器代码：

<asp:Repeater ID="Repeater1" runat="server" >
    <ItemTemplate>
        Name : <%# Eval("name")%>
        <DIV ID= "PersonalInfo1" runat="server"></DIV>
        <A id="A1" href="#" runat="server" onclick="show('PersonalInfo1','Address : ')">More...</A>
    </ItemTemplate>
</asp:Repeater>

PS：发布的代码在中继器中不起作用！

Answer 1

那是因为 id 是唯一的。使用 getElementsByName 或通过类名选择元素，例如 jQuery。

Answer 2

好的……让我们重新开始。

有这样的中继代码：

<asp:Repeater ID="Repeater1" runat="server" >
    <ItemTemplate>
        <div>
            Name : <%# Eval("name")%>
            <div id="Address" runat="server" style="display: none;"><%# Eval("address")%></div>
            <div id="Interests" runat="server" style="display: none;"><%# Eval("interests")%></div>
            <a id="A1" href="#" runat="server" onclick="return show(this, 'Address');">Show address</a>
            <a id="A2" href="#" runat="server" onclick="return show(this, 'Interests');">Show interests</a>
        </div>
    </ItemTemplate>
</asp:Repeater>

那么这样的JavaScript代码：

function show(oLink, targetDivID) {
    var arrDIVs = oLink.parentNode.getElementsByTagName("div");
    for (var i = 0; i < arrDIVs.length; i++) {
        var oCurDiv = arrDIVs[i];
        if (oCurDiv.id.indexOf(targetDivID) >= 0) {
            var blnHidden = (oCurDiv.style.display == "none");
            oCurDiv.style.display = (blnHidden) ? "block" : "none";
            //oLink.innerHTML = (blnHidden) ? "Less..." : "More...";
        }
    }
    return false;
}

这将搜索点击链接的“兄弟”DIV元素，并显示或隐藏它。

代码使用纯 JavaScript 尽可能简单，您应该能够理解每一行在做什么 - 如果您不知道，请随时询问。 :)

注意，您必须提前将个人信息放在 PersonalInfo div 中，而不是将其传递给函数 - 函数将获得指向点击链接的指针。

Answer 3

是的，您需要迭代所有相关链接。涉及代码更改最少的解决方案是向链接添加类，然后检查此类：

<A id="A1" href="#" runat="server" class="RepeaterLink" ...>

然后在 JavaScript 中：

var arrLinks = document.getElementsByTagName("a");
for (var i = 0; i < arrLinks.length; i++) {
    var oLink = arrLinks[i];
    if (oLink.className == "RepeaterLink") {
        //found link inside repeater..
        oLink.click();
    }
}

这将“自动点击”所有链接，您也可以检查 ID 或其他内容来模拟中继器中特定链接的点击。