在 JSF panelgrid 上使用 jQuery onmousedown 和 onmouseup

Question

我在页面上同时使用 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>

单击元素时，JS 会中断并将其记录到控制台：Uncaught TypeError: Object #<HTMLTableElement> as no method 'toggleClass'。我理解这个问题，但我已经搜索了一种可以应用于表格元素的类似方法，但没有运气。

有人有什么想法吗？

Answer 1

是的，DOM 对象没有 toggleClass 方法，它是您尝试调用它们的 jQuery 方法。

如果你有 jQuery，那么这就是解决方案：

$(element).toggleClass("hilite");