每次点击后 <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 点击处理程序并更改其颜色

<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>