javascript - 更新面板导致 css 问题

Question

首先，我很抱歉我在这里问这个问题，因为问题出在我的 sharepoint 应用程序中，但我相信它与 sharepoint 无关，因此在这里提问，因为有广泛的受众。我正在使用更新面板，在更新面板内部有一个 div，我向其分配了动态 html。在 html 中有一个按钮，点击它会改变颜色。因此，请考虑加载了很多元素，并且每个元素都有 like 按钮。发生的事情是，当我单击“赞”按钮时，它会从其他“赞”按钮中删除 css。我在我的 Web 部件中使用用户控件。这是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 的按钮。现在我点击一张图片下方的按钮，然后它会改变颜色。现在我点击其他图像下方的按钮，它改变了颜色，但现在它删除了其他按钮的颜色。我该如何解决这个问题。有疑问请追问。

Answer 1

在使用更新面板时，请确保您想要的任何更新都必须在更新面板内。如果它在同一个更新面板中，那么它将起作用，但如果它在更新面板之外，那么它就不会被反射(reflect)出来。为了使这个东西工作，你必须使用另一个更新面板并从后面的代码更新它(如果是这样的话)......

还有一点需要注意，在更新面板触发 css 后，如悬停等...将无法工作。对于这项工作，您必须重新分配所有 css/JS 操作。