在onclick属性中绑定组件

Question

我想切换一个组件的styleClass当用户点击它通过javascript。然而，下面的两个按钮不能同时属于"活动"类。我会在函数中直接使用id，但这是不可能的，因为按钮在ui:repeat标签内。我知道ui:repeat内部的形式是不建议的，但我在意识到这一事实之前就已经做到了，这应该不是我所要求的问题。所以，而不是使用id的我试图使用binding属性，但这似乎不起作用(我不知道如果这甚至是合法的)。

<ui:repeat var="thread" value="#{categoryBean.category.thethreads}">
<h:form>
    <p:commandButton icon="fa fa-chevron-up"
        binding="#{upvoteBtn}"
        action="#{threadVotesBean.upvote(thread)}" styleClass="voteBtn #{threadVotesBean.isUpvoteActive(thread) ? 'active': 'notActive'}"
        onclick="toggleClass(#{upvoteBtn.clientId},#{upvoteBtn.clientId},'up')"/>                                       
    <p:commandButton icon="fa fa-chevron-down"
        binding="#{downvoteBtn}"
        styleClass="voteBtn" action="#{threadVotesBean.downvote(thread)}"
        onclick="toggleClass(#{upvoteBtn.clientId}, #{downvoteBtn.clientId},'down')"/>
</h:form>
</ui:repeat>
 <!-- I don't know javascript so this is a bit funky just for testing  -->
    <script>
    function toggleClass(idUp, idDown, buttonPressed){
        alert("entered");
        var classUpvote =  document.getElementById(idUp).className;
        var classDownvote = document.getElementById(idDown).className; 
        if(buttonPressed == "up"){
            alert(classUpvote);
        }
    }
</script>

至于我为什么要这样做:我有一些话题，用户可以通过小箭头按钮投票赞成或反对。当这些按钮被按下时，按钮的颜色从蓝色变为橙色。如果可能的话，我想使用javascript，这样按钮切换颜色就不会延迟，而且我不想刷新页面。

Answer 1

这太蠢了，我只是忘记了"。应该是:

onclick="toggleClass('#{upvoteBtn.clientId}', '#{downvoteBtn.clientId}','down')"/>

代替

onclick="toggleClass(#{upvoteBtn.clientId}, #{downvoteBtn.clientId},'down')"/>

Answer 2

您正在使用主面吗?哪个版本?看看是否可以使用:http://www.primefaces.org/showcase/ui/input/oneButton.xhtml

如果没有主面，并且手头有JQuery，很容易做到:

试试这个:

<div id="threads">
    <ui:repeat var="thread" value="#{categoryBean.category.thethreads}">
        <h:form>
            <p:commandButton icon="fa fa-chevron-up" 
                                binding="#{upvoteBtn}" 
                                action="#{threadVotesBean.upvote(thread)}" 
                                styleClass="voteBtn #{threadVotesBean.isUpvoteActive(thread) ? 'active': ''}" />                                       
            <p:commandButton icon="fa fa-chevron-down" 
                                binding="#{downvoteBtn}" 
                                styleClass="voteBtn" 
                                action="#{threadVotesBean.downvote(thread)}" />
        </h:form>
    </ui:repeat>
</div>

    // function called when DOM is ready (page fully loaded.)
    $(function(){
        //selecting the DIV element with id 'threads'.
        var $threads = $('div#threads');
        // The DIV element injects an event on all elements with class 'voteBtn'.
        $threads.on('click', '.voteBtn', function(event) {
            // select the element that triggered the click event
            var $clickedBtn = $(event.currentTarget);
            // lookup for parent element with 'form' tag name and find inside it all children elements with class 'voteBtn' to remove 'active' class. 
            $clickedBtn.parent('form').find('.voteBtn').removeClass('active');
            // then, back to the trigger element, just add 'active' class to it.
            $clickedBtn.addClass('active');
        });
    });

或者这样更好:

<h:form id="threadsForm">
    <ui:repeat var="thread" value="#{categoryBean.category.thethreads}">
        <div id="group">
            <p:commandButton icon="fa fa-chevron-up" binding="#{upvoteBtn}" action="#{threadVotesBean.upvote(thread)}" styleClass="voteBtn #{threadVotesBean.isUpvoteActive(thread) ? 'active': 'notActive'}" />                                       
            <p:commandButton icon="fa fa-chevron-down" binding="#{downvoteBtn}" styleClass="voteBtn" action="#{threadVotesBean.downvote(thread)}" />
        </div>
    </ui:repeat>
</h:form>

    // function called when DOM is ready (page fully loaded.)
    $(function(){
        //selecting form element.
        var $form = $('#threadsForm');
        // the form element injects an event on all elements with class 'voteBtn'.
        $form.on('click', '.voteBtn', function(event) {
            // select the element that triggered the click event
            var $clickedBtn = $(event.currentTarget); 
            // lookup for parent element with 'group' class and find inside it all children elements with class 'voteBtn' to remove 'active' class. 
            $clickedBtn.parent('.group').find('.voteBtn').removeClass('active');
            // then, back to the trigger element, just add 'active' class to it.
            $clickedBtn.addClass('active');
        });
    });

是否"ui:repeat"渲染任何div或span?