在 onclick 属性中绑定 uicomponent

Question

我想在用户通过 javascript 单击 uicomponent 时切换它的 styleClass。但是下面的两个按钮不能同时属于 class "active"。我会直接在函数中使用 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

您正在使用 primefaces？哪个版本？看看能不能用：http://www.primefaces.org/showcase/ui/input/oneButton.xhtml

没有 primefaces 并且 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 或跨度？是的话就不行了。

在 onclick 属性中绑定 uicomponent

Binding uicomponent in onclick attribute

jsf

jsf-2.2