每次onclick

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>