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

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

java html wicket

Java 如何在wicket中单击三个div时显示不同的图像？,java,html,wicket,Java,Html,Wicket,我对ApacheWicket不熟悉。我需要在wicket中显示div的默认图像。单击图像左侧时，我想将其替换为其他图像，单击右侧时，我想将其替换为其他图像为此，我提出了以下html和java代码： <html> <head> <title>Wicket Hello World</title> <style> #linkDecisionContainer.left{ backgro

我对ApacheWicket不熟悉。我需要在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>


维克特你好，世界
#linkDecisionContainer.left{
背景图片：url（“Desert.jpg”）；
}
#linkDecisionContainer.default{
背景图片：url（“Koala.jpg”）；
}
#linkDecisionContainer.right{
背景图片：url（“Penguins.jpg”）；
}

我尝试将默认类添加到WebMarkupContainer，并在click事件中相应地添加了左类和右类

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

}

公共类Hello扩展网页{
私有静态最终长serialVersionUID=1L；
WebMarkupContainer ldc=新的WebMarkupContainer（“linkDecisionContainer”）；
私人AjaxLink左；
私人AjaxLink权利；
公众你好{
超级（）；
ldc.add（新属性修改器（“类”），true，新模型（“默认”）；
左=新AjaxLink（“左选择”）{
私有静态最终长serialVersionUID=1L；
@凌驾
公共void onClick（AjaxRequestTarget目标）{
开关视图（“左”）；
target.addComponent（右）；
}
};
右=新AjaxLink（“右选择”）{
私有静态最终长serialVersionUID=1L；
@凌驾
公共void onClick（AjaxRequestTarget目标）{
switchView（“右”）；
target.addComponent（右）；
}
};
添加（左）；
加（右）；
}
私有void开关视图（字符串视图名称）{
if（viewName.equals（“左”））{
ldc.add（新属性修改器（“类”），true，新模型（“左”）；
} 
else if（viewName.equals（“right”））{
ldc.add（新属性修改器（“类”），true，新模型（“右”）；
}
}
}

有谁能指导我实现它吗？

从您提供的代码来看，您似乎没有刷新“linkDecisionContainer”。此外，您不应该添加越来越多的

AttributeModifier

类，而应该只更改基础模型的值。添加另一个属性修改器不会替换属性修改器。因此，您依赖于

行为的实现来确定哪一个修改器成功
    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);

}

私有IModel ldcClassModel；
公众你好{
超级（）；
ldcClassModel=Model.of（“默认”）；
最终WebMarkupContainer ldc=新的WebMarkupContainer（“linkDecisionContainer”）；
增加（最不发达国家）；
ldc.setOutputMarkupId（真）；
添加（新属性修改器（“类”，ldcClassModel））；
AjaxLink left=新的AjaxLink（“leftChoice”）{
私有静态最终长serialVersionUID=1L；
@凌驾
公共void onClick（AjaxRequestTarget目标）{
ldcClassModel.setObject（“左”）；
目标.增加组成部分（最不发达国家）；
}
};
AjaxLink right=新的AjaxLink（“rightChoice”）{
私有静态最终长serialVersionUID=1L；
@凌驾
公共void onClick（AjaxRequestTarget目标）{
ldcClassModel.setObject（“右”）；
目标.增加组成部分（最不发达国家）；
}
};
添加（左）；
加（右）；
}