javascript - onClick on commandLink 设置该链接所附图像的 css

Question

我有两个 <h:commandLink>在每个<h:commandLink>我放了一个 <p:graphicImage>我想在 onClick 上更改图像的宽度和高度事件。 默认 usFlag保持活跃(意味着比其他更大)。 代码片段如下...

<p:commandLink id="usLink" action="#{localeController.switchLocale('en')}">
    <p:graphicImage id="usFlag" value="/resources/images/us-flag.gif" styleClass="activeFlag"/>
</p:commandLink>
<p:commandLink id="frLink" action="#{localeController.switchLocale('fr')}">
    <p:graphicImage id="frFlag" value="/resources/images/fr-flag.gif" styleClass="inActiveFlag"/>
</p:commandLink>

我希望在点击链接后设置该图像的高度和宽度。我想用js来完成。这怎么可能？谁能帮我？谢谢

Answer 1

您需要根据语言环境为图像动态分配样式类。在您的支持 bean 中创建一个方法，例如

public String getStyleClassForImageLocale(String locale)
{
// if locale = the currently selected locale
// then return "activeFlag"
// else return "inactiveFlag"
}

然后在你的 xhtml 中:

<p:commandLink id="usLink" action="#{localeController.switchLocale('en')}">
    <p:graphicImage id="usFlag" value="/resources/images/us-flag.gif" styleClass="#{localeController.getStyleClassForImageLocale('en')"/>
</p:commandLink>
<p:commandLink id="frLink" action="#{localeController.switchLocale('fr')}">
    <p:graphicImage id="frFlag" value="/resources/images/fr-flag.gif" styleClass="#{localeController.getStyleClassForImageLocale('fr')"/>
</p:commandLink>

然后在您的 css 文件中为样式类 .inActiveFlag 和 .activeFlag 设置宽度和高度