将背景图像 URL 更改为输入字段的值答案

【问题标题】：Change a Background-Image Url to an Input Field's value将背景图像 URL 更改为输入字段的值
【发布时间】：2011-05-13 04:26:53
【问题描述】：

我有一个输入元素、一个跨度和一个带有背景图像属性的 div。

<span>Go</span><input id="ImageUrl"/>

<div id="Image"></div>

我正在尝试创建一个脚本，如果用户在输入字段中粘贴/键入链接，然后单击“Go”按钮，则 div 的背景图像属性会更改为该 url。

【问题讨论】：

#Jason 你得到了答案，请做出回应。您可以接受、投票或只是在他们的答案中发表评论:)
@bungdito - 如果您指的是我之前提出的相同问题的线程，情况发生了变化，并且存在清晰度问题。我不想重新编辑整个问题。对不起。

标签： jquery css click attr

【解决方案1】：

在

中：

<script  type="text/javascript">
    function show() {
        $('#Image').css('background-image', 'url("' + $('#ImageUrl').val() + '")');
    }
</script>

在

中：

<span>Go</span><input id="ImageUrl"  /> <!-- the textbox can get the user input Url of Image-->
<div id="Image" style="width:200px; height:200px;"></div> <!-- the div which show Image -->
<input type="button" value="Go" onclick="show()" /> <!-- the GO button -->

如果有问题请告诉我:)

【讨论】：

我把它改成了点击功能，因为它更适合我，谢谢你的帮助！

【解决方案2】：

根据您的标记，如果您将 <span> 指定为 id 或 Btn（为了具体起见），则以下方法可行：

$("#Btn").click(function(){
    $("#Image").css("backgroundImage", "url('"+$("#ImageUrl").val()+"')");
});

演示：jsfiddle.net/mSAsU

【讨论】：

【解决方案3】：

基本上你可以：

$('input[type=submit]').click(function(){
    // for example changing it by appending "a"
    $("#ImageUrl").val($("#ImageUrl").val() + 'a';
});

【讨论】：

【解决方案4】：

这应该很好用。请注意，您必须在 CSS 函数调用中包含 url() 部分。

$("#ImageUrl").blur(function(){
    $("#Image").css("background-image", "url("+$(this).val()+")");
});

【讨论】：