Question

我有显示fancybox窗口的麻烦。我真的对jquery一无所知，我正在迈出第一步，所以我希望你有耐心。我的例子：

<h:form>
        <h:outputLink id="example1" value="/Images/Flor1.jpg"  title=""  >
                <h:graphicImage alt="example1" value="/Images/TbnFlor1.jpg" />
        </h:outputLink>
</h:form>

jquery函数

$(document).ready(
    function() {
        $("a#example1").fancybox();
});

这不起作用，如果输出链接在表单之外，fancybox可以正常工作。我一直在寻找解决这个问题的答案，但仍然无法找到它。我希望你能帮助我们，谢谢！

Answer 1

JSF生成HTML。 JavaScript / jQuery仅适用于HTML DOM树，而不适用于原始JSF源代码。在webbrowser中打开页面，右键单击它并执行查看源。您将看到生成的HTML <a>元素的ID前缀为JSF <form>生成的父<h:form>的ID。您需要在jQuery选择器中使用该ID。

所以，

<h:form id="form">
    <h:outputLink id="example1" value="/Images/Flor1.jpg"  title=""  >
        <h:graphicImage alt="example1" value="/Images/TbnFlor1.jpg" />
    </h:outputLink>
</h:form>

与

$('#form\\:example1').fancybox();

或

$("[id='form:example1']").fancybox();

应该这样做。 <{1}}是CSS选择器中的非法字符，因此必须进行转义。

然而，更容易使用样式类。

与

<h:outputLink ... styleClass="fancybox" />

通过这种方式，您可以更轻松地将其应用于未来的其他元素，而无需更改jQuery代码。

另见：

How to select JSF components using jQuery?

FancyBox在h：form中不起作用

1 个答案:

另见：