Question

当用户专注于文本字段时，我正在尝试使用JavaScript更新图像。目前有以下HTML / Wicket代码：

<div class="input-prepend">
    <span class="add-on">
        <wicket:link>
            <img src="img/username-img-1.png" id="username-img"/>
        </wicket:link>
    </span>
    <input type="text" id="username" placeholder="User Name" wicket:id="username" />
</div>

以下JavaScript代码：

$(document).ready(function() {  
    $('#username').focus(function() {
        $('#username-img').attr("src","img/username-img-2.png" );
    });
});

显然，这不起作用，因为Wicket有自己的方式来引用资源。我想知道我的其他选择。谢谢！

Answer 1

我知道您在webapp文件夹中有图像。所以问题是你需要使用UrlUtils.rewriteToContextRelative重写URL作为上下文相关。

这样的事可能有用：

public void renderHead(IHeaderResponse response) {

    StringBuilder script = new StringBuilder();
    script.append("$('#username').focus(function() {");
    script.append("$('#username-img').attr(\"src\",\"");
    script.append(UrlUtils.rewriteToContextRelative("img/logo.png", RequestCycle.get()));
    script.append("\");");
    script.append("});");

    response.render(OnDomReadyHeaderItem.forScript(script.toString()));
}

Wicket使用JavaScript更新图像

1 个答案: