首先,我很遗憾我在这里提出这个问题,因为问题出在我的sharepoint应用程序中,但我认为它与sharepoint无关,因此在这里要求有广泛的受众。我正在使用更新面板和内部更新面板有div我分配动态HTML。在html中有类似按钮,当点击时改变颜色。因此,请考虑加载了很多项目,每个项目都有类似按钮。当我点击按钮然后它从其他类似按钮中移除css时会发生什么。我在我的webpart中使用用户控件。这是html代码
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:HiddenField runat="server" ID="hdnFld" Value="Its working"/>
<asp:HiddenField runat="server" ID="hdnFldLikeSpan" Value="Span like"/>
<asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_OnClick" style="display:none"/>
<section id="ideas" class="container">
<div id="divShowImages" class="row" style="" runat="server" >
</div>
<div class="row" >
<div >
<a id="btnloadData" runat="server" OnServerClick="btnloadData_Click">Load more data</a>
</div>
</div>
<div>
</div>
</section>
</ContentTemplate>
</asp:UpdatePanel>
这是我的风格
<style>
.ChangeColor {
background:red !important
}
.ChangeColor *{color:white !important}
.ChangeColor .heart:before,.ChangeColor .heart:after{background:white !important}
.quote .like-idea, .quote .like-idea:hover {
background: red;
}
.quote .ChangeColor {
background:black !important
}
.quote .ChangeColor *{color:white !important}
.quote .ChangeColor .heart:before,.quote .ChangeColor .heart:after{background:white !important}
这是我的javascript代码
<script type="text/javascript">
function incrementNumber(id, name) {
document.getElementById("<%= hdnFld.ClientID %>").value = id;
document.getElementById("<%= hdnFldLikeSpan.ClientID %>").value = name;
eval(<%=serversideEvent %>);
}
function incrementCounter(likes, spanName) {
$('#' + spanName).parent().addClass('ChangeColor');
document.getElementById(spanName).innerText = likes;
}
当呈现Html时,它会加载图像。在所有图像下面都有按钮。当您单击按钮时,它会增加计数器并更改颜色。该按钮只是一个名为btnSubmit
的按钮。
现在我单击一个图像下方的按钮然后它会改变颜色。现在我点击其他图像下方的按钮,它会改变颜色,但现在它会删除其他按钮的颜色。我怎么能解决这个问题。请问是否有任何疑问。
答案 0 :(得分:0)
所有字段都在同一个更新面板中,因此我认为它会在您进行回发时重新加载所有属性值。尝试将此属性存储在外部或尝试使用javascript / ajax执行操作。
[OFF]我无法帮助你聊天,因为我没有声望:你必须在Stack Overflow上有20个声望才能在这里谈谈
答案 1 :(得分:0)
使用更新面板时,请确保您需要的任何更新必须在更新面板中。如果它在同一个更新面板中,那么它将工作,但如果它在更新面板之外,那么它将不会被反映。为了使这个东西工作,你必须使用另一个更新面板,并从后面的代码更新(如果是这样的话)......
还有另外一点要注意,在更新面板触发css之后,如悬停等......将无效。对于这项工作,你必须重新分配所有的css / JS动作。