无法使用JS / Jquery更改背景图片

Question

我有一个输入框，可以输入任何图像的Web URL，然后有一个按钮可以更改CSS背景图像。 该代码是我看待它的好方法，但是它不起作用。 你能指出错误吗？

的HTML

<input name="webURL" type="text" id="webURL" value="" placeholder="Or paste a web URL"><br>
<input type="submit" id="submit-btn" class="webBtn" value="Upload it."/>

JS

$('.webBtn').click(function(){
    $('#uploadedPhoto').css('background-image', "url($('#webURL').attr('value'))");
    $('#webURL').attr('value', URL);
});

Answer 1

试试这个伴侣

$('.webBtn').click(function(){
        $('#uploadedPhoto').css('background-image',"url("+$('#webURL').attr('value')+")");
        $('#webURL').attr('value', URL);
    });

小提琴

Answer 2

的HTML

<input name="webURL" type="text" id="webURL" value="" placeholder="Or paste a web URL"><br>
<input type="submit" id="submit-btn" class="webBtn" value="Upload it."/>

<div id="uploadedPhoto" style="width:200px; height: 200px;"></div>

jQuery的

<script>
    $('.webBtn').click(function(){
        var upUrl = $('#webURL').val();

        $('#uploadedPhoto').css({'background-image' : 'url(' + upUrl + ')','background-repeat': 'no-repeat'});
        $('#webURL').attr('value', URL);
  });
</script>

尝试这个。 应该管用。

Answer 3

JavaScript不会进行字符串插值。

这是一个包含jQuery选择器的文字字符串。

"url($('#webURL').attr('value'))"

相反，您需要通过串联各个部分来构建正确的字符串：

"url(" + $('#webURL').attr('value') + ")"

Answer 4

试试这个工作代码-

$('.webBtn').click(function(){
    $('#uploadedPhoto').css('background-image',"url("+$('#webURL').val()+")");
    $('#webURL').val('');
});

演示- 小提琴