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

在JSF panelgrid上使用jQuery onmousedown和onmouseup

1 个答案: