我如何使我的JavaScript工作在中继器

本文关键字：工作中继器 JavaScript 我的何使 | 更新日期: 2023-09-27 18:10:03

我有一个使用重复器的asp.net项目。

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
            <asp:label ID="lblexp" runat="server" Text="05/11/1981" Visible="false"></asp:label>
        </HeaderTemplate>
        <ItemTemplate>                
            <div id="myNest" class="grid">
            <div class="imgholder">
                <img src="<%# Eval("ImageAlt1")%>" />
            </div>        
            <strong><%# Eval("ItemName")%> <bdo style="color:green;">$<%# Eval("ItemPrice")%></bdo></strong>
            <p class="test"><%# Eval("ItemDescription")%></p>
            <div style="color:red; font-size:small;"><asp:Label ID="lblExp" Text='<%# Bind("CreateDate") %>' runat="server" /></div>
            <div class="meta"><%# Eval("Email")%></div>
            </div>
        </ItemTemplate>
        <FooterTemplate>
            <asp:label ID="lblexp" runat="server" Text="05/11/1981" Visible="false"></asp:label>
        </FooterTemplate>

和一些javascript来缩短ItemDescription

<script type="text/javascript">
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
</script>

无论出于什么原因，javascript无法看到重复器中的项。我该如何解决这个问题?

TypeError: Cannot read property substring of undefined

我如何使我的JavaScript工作在中继器

这里可能有两个问题:

JS在相关标记呈现之前运行。要解决这个问题，只需将js封装在某种文档加载处理程序中:

$(function() {
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
});

html()调用为您提供了选择器匹配列表中第一项的内部html。你可能会为所有找到的项目这样做，在这种情况下，把你的html操作在each()。顺便说一下，考虑text而不是html，它看起来更符合您的情况。

我怀疑您的脚本在加载DOM之前正在运行。要么将脚本标签移动到</body>标签上方，要么像这样包装脚本:

<script type="text/javascript">
  $(function () { // equivalent to $(document).on('ready', function...
    var after = 5;
    var html = $(".grid p.test").html();
    html = html.substring(0, after) + "<span> ...</span>";
    $(".grid p.test").html(html);
  });
</script>