Javascript 颜色变化<；p:commandButton>；每舔一次之后

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

---

尝试以下操作：为每个按钮放置

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>

$（函数（）{
变量颜色=[‘红色’、‘绿色’、‘蓝色’、‘粉色’、‘黄色’、‘灰色’、‘白色’]；
var len=colors.length；
var计数器=0；
$（'.changeColor'）。单击（函数（）{
$（this.css（'background-color'，colors[counter]）；
计数器++；
//复位计数器
如果（计数器==len）
计数器=0；
});
});

将整个代码（带有

标记的代码）放在页面的

标记下或

标记内也可以。我想在用弹出窗口单击后更改p:commandButton的颜色，所以你想在每次单击

时更改按钮的颜色，那么上面的代码只需添加
class=“changeColor”
切换到该按钮并将其从弹出按钮中删除