Javascript 在JSF panelgrid上使用jQuery onmousedown和onmouseup

我在页面上同时使用jQuery和JSF元素

我的要求是panelGrid元素在单击时重定向用户。 我通过以下几点做到了这一点：

    <h:panelGrid>
    <f:ajax event="click" listener="#{bean.click"/>
    <h:panelGroup>
        <div>
            <h:panelGroup>
                <img src="../resources/img/icon_circle_footer.png" width="20px" height="20px" />
                <div>
                    <div>
                        <div><b>R800,00</b></div>
                        <div>per passenger</div>
                    </div>
                    <div>Company Name</div>
                </div>
                <div>
                    <div>
                        <div>Timespan</div>
                        <div>non-stop</div>
                    </div>
                </div>
                <img src="../resources/img/icon_circle_footer.png" width="20px" height="20px" />
            </h:panelGroup>
        </div>
    </h:panelGroup>
</h:panelGrid>

<h:panelGrid onmousedown="mousedown(this);" onmouseup="mouseup(this);">
    <f:ajax event="click" listener="#{bean.clickGrid}"
</h:panelGrid>

<script>
    function mousedown(element) {
        element.toggleClass("hilite");
    }

    function mouseup(element) {
        element.toggleClass("hilite");
    }
</script>

R800,00
每位乘客
公司名称
时间跨度
直达

这很好，但是目前没有任何东西可以向用户表明元素已经被单击

我想在用户单击元素时更改其背景，并尝试了以下操作：

    <h:panelGrid>
    <f:ajax event="click" listener="#{bean.click"/>
    <h:panelGroup>
        <div>
            <h:panelGroup>
                <img src="../resources/img/icon_circle_footer.png" width="20px" height="20px" />
                <div>
                    <div>
                        <div><b>R800,00</b></div>
                        <div>per passenger</div>
                    </div>
                    <div>Company Name</div>
                </div>
                <div>
                    <div>
                        <div>Timespan</div>
                        <div>non-stop</div>
                    </div>
                </div>
                <img src="../resources/img/icon_circle_footer.png" width="20px" height="20px" />
            </h:panelGroup>
        </div>
    </h:panelGroup>
</h:panelGrid>

<h:panelGrid onmousedown="mousedown(this);" onmouseup="mouseup(this);">
    <f:ajax event="click" listener="#{bean.clickGrid}"
</h:panelGrid>

<script>
    function mousedown(element) {
        element.toggleClass("hilite");
    }

    function mouseup(element) {
        element.toggleClass("hilite");
    }
</script>

是的，DOM对象没有toggleClass方法，而是您试图调用的jQuery方法

如果包含jQuery，那么这就是解决方案：

$（元素）.toggleClass（“hilite”）
我想你的意思是
$（element）.onclick（function（）{$（element）.toggleClass（“hilite”）；}
？不！这样：function mousedown（element）{$（element）.toggleClass（“hilite”）；}和mouseup函数的意思是一样的事实上，只要用
$（element）
替换代码中的
$（element）
。
$（element）
将HTML DOM元素转换为jQuery对象，然后可以在该对象上调用所有jQuery特定函数。请注意，这一切与JSF无关。