Question

我有一个输入框，可以获取任何图像的网址，然后我有一个更改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);
    });

Fiddle

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

演示 - Fiddle

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

4 个答案: