检票口使用 JavaScript 更新图像

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