jquery - 背景画像の URL を入力フィールドの値に変更する

Question

背景画像プロパティを持つ入力要素、スパン、および div があります。

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

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

ユーザーがリンクを入力フィールドに貼り付けたり入力したりして [Go] ボタンをクリックすると、div の背景画像プロパティがその URL に変更されるスクリプトを作成しようとしています。

Answer 1

マークアップに基づいて、<span>（具体性のために）のを指定すると、次のようになりますid。Btn

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

デモ: jsfiddle.net/mSAsU

Answer 2

< head> で:

<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 -->

問題がある場合はお知らせください:)

Answer 3

基本的に、次のことができます。

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

Answer 4

これはうまくいくはずです。url()CSS 関数呼び出しにパーツを含める必要があることに注意してください。

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