的顏色變化 <p:commandButton> 每次點擊后

Question

我在jsf頁面中的代碼如下所示，下面的代碼使我每次點擊都會彈出，但同時我想為每次點擊更改顏色p：commandButton。

<h:form id="form">

 <p:commandButton id="button01" oncomplete="PF('test01').show()" value="sysno_01" icon="button" update=":form01:dialog01" />
</h:form>

  <h:form id="form01">
         <p:dialog header="Login" widgetVar="test01" id="dialog01"
            resizable="true" showEffect="explode" hideEffect="explode">

            <p:panelGrid id="display01" columns="2">
            <h:outputText value=" First name" />
            <h:inputText id="fnme01" value="#{studentLoginBean.studentname}" />
            <h:outputText value=" last name" />
            <h:inputText id="lnme01" value="#{studentLoginBean.lastname}" />
            </p:panelGrid>
            <h:commandButton actionListener="#{studentLoginBean.login}" value="Login">
             <f:param name="action" value="01" />
            </h:commandButton>  
            <h:commandButton actionListener="#{studentLoginBean.logout}" value="Logout">
                <f:param name="action" value="01" />
            </h:commandButton>
        </p:dialog> 
</h:form>

Answer 1

試試這個：為每個按鈕放置class="changeColor" ，如下所示

<h:commandButton actionListener="#{studentLoginBean.login}" value="Login" class="changeColor">
         <f:param name="action" value="01" />
</h:commandButton>  
<h:commandButton actionListener="#{studentLoginBean.logout}" value="Logout" class="changeColor">
            <f:param name="action" value="01" />
</h:commandButton>

然后在其上注冊一個jQuery Click處理程序並更改其顏色

<script>
    $(function(){
         var colors = ['red','green','blue','pink','yellow','gray','white'];
         var len = colors.length;
         var counter = 0;
         $('.changeColor').click(function(){
             $(this).css('background-color', colors[counter]);
             counter++;
             //reset counter
             if(counter==len)
               counter = 0;
         });
    });
</scrip>