如何在 wicket 中单击三个 div 时显示不同的图像？

Question

我是 apache wicket 的新手。我需要在 wicket 中显示 div 的默认图像。单击图像左侧我想将其替换为其他图像，单击右侧我想将其替换为其他图像。

为此，我想出了以下 html 和 java 代码：

<html>
<head>
    <title>Wicket Hello World</title>
    <style>
        #linkDecisionContainer.left{
            background-image: url("Desert.jpg");
        }

        #linkDecisionContainer.default{
            background-image: url("Koala.jpg");
        }

        #linkDecisionContainer.right{
            background-image: url("Penguins.jpg");
        }

    </style>
</head>
<body>    
    <div wicket:id ="linkDecisionContainer">
        <a wicket:id="leftChoice"></a>
        <a wicket:id="defaultChoice"></a>
        <a wicket:id="rightChoice"></a>
    </div>
</body>
</html>

我尝试将默认值 class 添加到 WebMarkupContainer 并在单击事件中相应地向左和向右添加 classes。

public class Hello extends WebPage {

private static final long serialVersionUID = 1L;
WebMarkupContainer ldc=new WebMarkupContainer("linkDecisionContainer");

private AjaxLink left;
private AjaxLink right;

public Hello() {

    super();

    ldc.add(new AttributeModifier("class", true, new Model<String>("default")));

    left = new AjaxLink("leftChoice") {
        private static final long serialVersionUID = 1L;

        @Override
        public void onClick(AjaxRequestTarget target) {
            switchView("left");
            target.addComponent(right);
        }
    };

    right = new AjaxLink("rightChoice") {
        private static final long serialVersionUID = 1L;

        @Override
        public void onClick(AjaxRequestTarget target) {
            switchView("right");
            target.addComponent(right);
        }
    };

    add(left);
    add(right);

}


    private void switchView(String viewName) {
        if (viewName.equals("left")) {
            ldc.add(new AttributeModifier("class", true, new Model<String>("left")));
        } 
        else if (viewName.equals("right")) {
            ldc.add(new AttributeModifier("class", true, new Model<String>("right")));
        }
    }

}

谁能指导我实现它？

Answer 1

从您提供的代码来看，您似乎没有刷新 "linkDecisionContainer"。此外，您不应添加越来越多的 AttributeModifier 类，而应仅更改基础模型的值。 AttributeModifier 不会被添加另一个替换。因此，您依靠 Behaviors 的实施来确定哪个修改器最终获胜。

    private IModel<String> ldcClassModel;

public Hello() {
    super();

    ldcClassModel = Model.of("default");
    final WebMarkupContainer ldc = new WebMarkupContainer("linkDecisionContainer");
    add(ldc);
    ldc.setOutputMarkupId(true);
    ldc.add(new AttributeModifier("class", ldcClassModel));

    AjaxLink left = new AjaxLink("leftChoice") {
        private static final long serialVersionUID = 1L;

        @Override
        public void onClick(AjaxRequestTarget target) {
            ldcClassModel.setObject("left");
            target.addComponent(ldc);
        }
    };
    AjaxLink right = new AjaxLink("rightChoice") {
        private static final long serialVersionUID = 1L;

        @Override
        public void onClick(AjaxRequestTarget target) {
            ldcClassModel.setObject("right");
            target.addComponent(ldc);
        }
    };

    add(left);
    add(right);

}

如何在 wicket 中单击三个 div 时显示不同的图像？

How to display different image on click of three div in wicket?

html

java

wicket