Question

我有4个按钮，每个按钮将使用Ajax显示一个图像。

<h:form>
            <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}">
                <f:ajax render="Family" />
            </h:commandButton>
            <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}">
                <f:ajax render="Karam"/>
            </h:commandButton>
            <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}">
                <f:ajax render="Memo"/>
            </h:commandButton>
            <h:commandButton value="Click" action="#{userAjaxData.toggleStatus}">
                <f:ajax render="Baba"/>
            </h:commandButton>

            <h:panelGroup id="Family">
                <p:graphicImage library="images/img" name="family.png" id="FamilyImg" rendered="#{userAjaxData.status}"/>
            </h:panelGroup>
            <h:panelGroup id="Karam">
                <p:graphicImage library="images/img" name="Karam.png" id="KaramImg" rendered="#{userAjaxData.status}"/>
            </h:panelGroup>
            <h:panelGroup id="Memo">
                <p:graphicImage library="images/img" name="memo.png" id="MemoImg" rendered="#{userAjaxData.status}"/>
            </h:panelGroup>
            <h:panelGroup id="Baba">
                <p:graphicImage library="images/img" name="baba.png" id="BabaImg" rendered="#{userAjaxData.status}"/>
            </h:panelGroup>
        </h:form>

我的蚕豆：

@ManagedBean(name = "userAjaxData", eager = true)
@SessionScoped
public class UserAjaxData implements Serializable {

    private static final long serialVersionUID = 1L;
    private boolean status = false;

public void toggleStatus() {
        status = true;
    }

    public boolean isStatus() {
        return status;
    }

    public void setStatus(boolean status) {
        this.status = status;
    }}

当我单击任何按钮时它将显示相关图像，因此如果我单击第一个图像将显示第一个图像，第二个按钮将显示第二个图像，但第一个图像将不会被删除。每次单击按钮时，我只需要一种方法来显示一个图像。因此，如果我单击第一个按钮，则第二个按钮应显示第二个图像，第一个图像消失。

我该怎么做？

Answer 1

如果您的用例非常简单，我建议仅使用一个始终呈现<h:graphicImage />（在这种情况下不需要PrimeFaces GraphicImage ）并设置通过ajax而不是一个或多个切换状态显示在支持bean中的相应图像，如下所示：

<h:form id="form">
    <h:commandButton
        id="familyButton"
        action="#{toggleImageView.setImage('family.png')}"
        value="Family"
    >
        <f:ajax render="image" />
    </h:commandButton>
    <h:commandButton
        id="karamButton"
        action="#{toggleImageView.setImage('karam.png')}"
        value="Karam"
    >
        <f:ajax render="image" />
    </h:commandButton>
    <h:commandButton
        id="memoButton"
        action="#{toggleImageView.setImage('memo.png')}"
        value="Memo"
    >
        <f:ajax render="image" />
    </h:commandButton>
    <h:commandButton
        id="babaButton"
        action="#{toggleImageView.setImage('baba.png')}"
        value="Baba"
    >
        <f:ajax render="image" />
    </h:commandButton>
    <br />
    <h:graphicImage
        id="image"
        library="image/img"
        name="#{toggleImageView.image}"
    />
</h:form>

@ManagedBean
@RequestScoped
public class ToggleImageView {

    private String image;

    @PostConstruct
    public void initialize() {
        image = "family.png";
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }
}

只需适应您的需求。

使用ajax切换图像

1 个答案: