如何使用JavaScript访问中继器中的Div [英] How to access a Div inside a repeater using javascript

问题描述

简单来说，我在中继器中有一个锚点，该锚点会在单击javascript函数时触发，该函数将Div的innerHTML设置为某些内容.

Simply, I have an anchor inside a repeater that triggers on click a javascript function, which sets the innerHTML of a Div to some content.

在中继器之外尝试此功能确实有效！但是，如果我尝试在中继器的项目模板中实现相同的代码，它将无法正常工作！

trying this outside a repeater did work! but if I tried to implement the same code in the repeater's item template, it won't work!

注意::我想我需要先访问转发器，然后访问其中的锚点！但我不知道怎么做

NOTE: I think I need to access the repeater first then access the Anchor inside it! but I don't know how to do it

进一步的说明:

JavaScript函数:

JavaScript Function:

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:中继器中的邮政编码无效！

推荐答案

好的...让我们重新开始.

OK... let's start over.

具有这样的中继器代码:

Have such repeater code:

<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代码:

Then such JavaScript code:

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元素，并将其显示或隐藏.

This will search for "brother" DIV element of the clicked link, and show or hide it.

使用纯JavaScript的代码尽可能简单，您应该能够理解每一行的内容-随时询问是否没有.:)

The code is as simple as possible using pure JavaScript, you should be able to understand what each line is doing - feel free to ask if you don't. :)

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

Note, you have to put the personal info in the PersonalInfo div in advance instead of passing it to the function - the function will get pointer to the clicked link.

这篇关于如何使用JavaScript访问中继器中的Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！