Question

在转发器的ItemTemplate中，我有..

retstr.AppendLine("<div id='contentDivImg' style='display: block;'><img src = '" & img_src & "' /></div>")

按下切换按钮/链接时，每个图像都需要隐藏和显示。虽然，只有第一个IMAGE / DIV切换可见性，但以下图像的路径也不会通过上面的代码行从数据库中获取。为什么？我尝试过使用class而不是id参数。

这是javascript，只有感兴趣..

<script type="text/javascript">
    function toggle(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if (ele.style.display == "block") {
            ele.style.display = "none";
            imageEle.innerHTML = '<img src="/images/Show.png">';
        }
        else {
            ele.style.display = "block";
            imageEle.innerHTML = '<img src="/images/Hide.png">';
        }
    }
</script>

并且，这是一个简单的切换链接，用于在单击时显示和隐藏conntentDivImage。

<a id="imageDivLink" href="javascript:toggle('contentDivImg', 'imageDivLink');"><img src="/images/Hide.png"></a>

Answer 1

getElementById只返回该ID的第一个元素，因此第一个元素是唯一一个根据您的代码工作的元素。我会在ItemTemplates中添加一个计数器，为每个div提供一个唯一的ID，比如contentDivImg1和contentDivImg2，然后当你有一个锚标记的ItemTemplate时，请确保在调用你的javascript函数时引用正确的。

Answer 2

问题在于，在HTML中，ID应该是唯一的。找到具有匹配ID的第一个元素后，document.getElementById()停止。在这种情况下，它会找到第一个<div>并忽略页面的其余部分。

但是，您可以更改使用转发器的方式以更好地满足您的需求：

如果你重组你的转发器看起来更像这样：

<!-- the repeater now has an OnItemDataBound event -->
<asp:Repeater runat="server" ID="rptDivs" OnItemDataBound="rptDivs_OnItemDataBound">
  <ItemTemplate>
    <!-- The <div>, <img>, and <a> tags have runat="server". This is important. -->
    <div runat="server" ID="div"><img runat="server" ID="img" />
         <a id="a" runat="server"><img src="/Images/Hide.png" id="img2" runat="server" /></a>
    </div>
  </ItemTemplate>
</asp:Repeater>

...然后转发器中的每个<div>和<img />都会有唯一的ID。 ID将如下所示：``。

您需要在页面的代码后面添加一个事件，以便为HTML设置属性（例如src）。由于您已将OnItemDataBound事件添加到转发器中，因此您可以访问代码中的对象（这是在C＃中，但这个想法仍然适用于VB）。

protected void rptDivs_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    // first, let's get the item that you have bound to your repeater
    MyObject myObject = (MyObject)e.Item.DataItem;

    //  You can access the image and div objects here because they are set to runat="server"
    HtmlImage img = (HtmlImage)e.Item.FindControl("img");
    HtmlImage buttonImg = (HtmlImage)e.Item.FindControl("img2");
    HtmlAnchor a = (HtmlAnchor)e.Item.FindControl("a");
    HtmlGenericControl div = (HtmlGenericControl)e.Item.FindControl("div");

    //  you can now set the properties of the HTML in your code-behind
    img.Src = myObject.imgSrc;
    a.Attributes["onclick"] = "javascript:toggle('" + div.ID + "', '" + buttonImg.ID + "');";

}

每个重复元素的HTML输出现在可能如下所示：

    <div ID="body_body_div_1"><img ID="body_body_img_1" />
         <a id="body_body_a_1" onclick="javascript:toggle('body_body_div_1', 'body_body_img_1');"><img src="/Images/Hide.png" id="body_body_img2_1" runat="server" /></a>
    </div>

... ID在每个重复元素之间变化。

Repeater内的DIV内容无法控制

2 个答案: