Question

我在更新面板中有一个图像。当我点击图像时，需要突出显示。如果它在updatepanel之外，我使用addclass和removeclass来完成这项工作。当我将图像放在updatepanel中时，会应用css，但在更新完成并呈现页面后会恢复为原始文件。

如何动态更改更新面板内图像的样式？

标记：

<asp:UpdatePanel ID="UpdatePanel2" runat="server" class="journey-categories">
                        <ContentTemplate>
                            <ul class="journey-categories">
                                <asp:Repeater ID="rptJourneyCategories" runat="server">
                                    <ItemTemplate>
                                        <li>
                                            <a href="javascript:void(0)" data-categoryid="<%# Eval("Id") %>" data-introtitle="<%# Eval("IntroTitle") %>" data-introtext="<%# Eval("IntroText") %>">
                                                <img class="thumb" src="<%# Eval("CategoryIcon") %>" width="70" height="70" alt="" id="imgCategoryIcon" />
                                            </a>
                                            <span><%# Eval("Title") %></span>
                                        </li>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </ul>
                        </ContentTemplate>
                    </asp:UpdatePanel>

Jquery的：

$('[data-categoryid]').off('click.categories').on('click.categories', function () {
                   $(this).closest('ul').find('li.selected').removeClass('selected');
                    $(this).parent().addClass('selected');
                });

Answer 1

我在 EndRequestHandler

的帮助下完成了这项工作

我在内部脚本文档中添加了以下内容，并在更新面板完成后更新了样式。

<script type="text/javascript">
        $(function () {
            var onDomReady = function () {
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler() {
                    var type = $('[id$=ddlType]').val();
                    $('a[data-categoryid="' + type + '"').parent().addClass('selected');
                }
}});

动态更改updatepanel中项目的样式

1 个答案: