动态更改更新面板内项目的样式
Change style of an item inside updatepanel dynamically
我在更新面板中有一张图片。当我单击图像时,它需要突出显示。如果它在 updatepanel 之外,我使用 addclass 和 removeclass 来完成这项工作。当我将图像放入更新面板时,应用 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');
});
我在 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 之外,我使用 addclass 和 removeclass 来完成这项工作。当我将图像放入更新面板时,应用 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');
});
我在 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');
}
}});