Javascript jQuery-从URL替换div背景图像

我正在尝试从label元素（键入的URL）替换几个div中的div background，虽然代码可以工作，但它不会通过$（“#urlImage”）

jQuery:

$(document).ready(function(){
$('.first, .second, .third').append("");
  $('#urlImage').change(function(){
    $('.first, .second, .third').css('background-image', $('#urlImage').val());
  });
})

     $(document).ready(function(){
     var imageUrl = document.getElementById("#urlImage").value;
    $('#wrapper > div').each(function () {
      this.css('background-image', 'url(' + imageUrl + ')');// "this" is the current element in the loop
     });
     })

HTML

<input type="text" id="urlImage" placeholder="Type image URL">

<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>

      <div id="wrapper">
      <input type="text" id="urlImage" placeholder="Type image URL">

       <div class="first">
       </div>
        <div class="second">
         </div>
         <div class="third">
        </div>
       </div>

基本上，我需要任何类型的加载作为背景图像

谢谢你的建议。

让我们试试

$(document).ready(function(){
  $('#urlImage>div').each(function(){
    $(this).css('background-image', $('#urlImage').val());
  });
})

---

将Dom元素包装在一个div中，并在其中进行迭代，查找div元素，然后使用URLMImage输入的值向每个div添加背景图像css属性 只有当您的输入元素中已经有一些值时，这才有效。为了处理它，您应该始终通过keypress或keyup事件来处理它

HTML

<input type="text" id="urlImage" placeholder="Type image URL">

<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>

      <div id="wrapper">
      <input type="text" id="urlImage" placeholder="Type image URL">

       <div class="first">
       </div>
        <div class="second">
         </div>
         <div class="third">
        </div>
       </div>

编辑1

    (function(){
      $( "#urlImage" ).keyup(function(){
        var imageUrl = document.getElementById("#urlImage").value;
       $('#wrapper > div').each(function () {
        this.css('background-image', 'url(' + imageUrl + ')');// "this" is the current element in the loop
       });
       });
       })

---

通过检查元素来检查css是否被正确应用，哦，它的

jQuery

not

jQuary

所有的css都很好，我可以放置其他的东西，只是不能在表单中放置背景图像（样式）。哈哈，编辑好了，谢谢！我的想法是，在side id=“urimage”中查找所有div。对于每个div，您将更改background-image。但这会更改#urlmimage中的div，我需要分别更改它们。谢谢回复！虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性@拜登道具：当然可以。在这段时间里，我的解决方案是解决问题。请投我的票。谢谢，这似乎可以，但我得到了错误：uncaughttypeerror:document.getElementbyId不是一个函数我已经编辑了答案，请看一下。这是一个输入错误，应该是document.getElementById而不是document.getElementbyIdOk，输入错误已修复，现在我有：Uncaught TypeError:无法读取null的属性“value”