javascript - 在 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");