Question

我试图用标签元素（键入的网址）替换几个div中的div背景，当代码有效时，它不会推动 $（＆＃39;＃urlImage＆＃39 ;）即可。

jQuery的：

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

HTML

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

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

基本上我需要输入的任何内容作为背景图像加载。

感谢您的任何建议。

Answer 1

试试

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

Answer 2

将您的Dom元素包装在div中并迭代查找div元素并使用urlImage输入值为每个div添加background-image css属性这只有在输入元素中已经有一些值才能处理它时才会起作用总是你应该通过keypress或keyup事件来处理它

<强> HTML

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

<强> JS：

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

修改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
       });
       });
       })

jQuery - 从URL替换div背景图像

2 个答案: