Question

我正在尝试根据也在转发器内部的文本框的值实时更改转发器内部的标签。

我尝试使用JS解决此问题，但无法访问转发器内的标签或文本框。

如果标签或文本框位于转发器之外，则没有问题

JS：

<script language="javascript" type="text/javascript">
    document.getElementById('<%=labelToUpdate.ClientID%>').innerHTML = document.getElementById('<%=txtInput.ClientID%>').value;
</script>

ASPX：

<asp:TextBox ID="txtInput" runat="server" class="form-control"></asp:TextBox>
<asp:Label ID="labelToUpdate" runat="server"></asp:Label>

任何帮助总是很感激。

谢谢

Answer 1

Repeater控件位于ItemTemplate内部，因此您不能直接引用它们。您需要通过索引访问它们。

您可以使用方法

document.getElementById('<%= Repeater1.Items[i].FindControl("labelTotalCsrPercentage").ClientID %>').innerHTML = 
   document.getElementById('<%= Repeater1.Items[i].FindControl("txtInput").ClientID %>').value;

或者使用jquery变得更容易。然后，您可以使用nth-of-type选择器

$('#MyRepeater1 span:nth-of-type(2)').html($('#MyRepeater1 span:nth-of-type(2)').prev('input').val());

为此，您需要使用具有唯一ID的元素包装中继器

<span id="MyRepeater1">
    <asp:Repeater ID="Repeater1" runat="server">
    </asp:Repeater>
</span>

Answer 2

asp:repeater在项目级别控制id前添加其id（及其父id）。因此，使用这个想法。将脚本放置在转发器之后。

<script> //language="javascript" is deprecated //type="text/javascript" is default and cam be omitted var txts = document.querySelectorAll('input[id$=txtInput]'); for(var i = 0, txt; txt = txts[i]; ++i){ txt.addEventListener('change', function(){ document.getElementById(this.id.replace('txtInput', 'labelToUpdate')).innerHTML = this.value; }); } </script>

如果更容易，您也可以使用jQuery。

实时更改中继器内的标签

2 个答案: