JQuery不设置背景图像第一次

我想设置一个背景图像与JQuery的div。如果存在多个图像，它将起作用，但如果存在单个图像，则不起作用。JQuery不设置背景图像第一次

for(var i = 0; i<offers.length; i++) 
{ 
    var offer = offers[i]; 
    var photo = photos[i]; 
    $('.img-product').css("background-image", "url("+photo+")"); 
    $('.img-product').css("background-size", "100% 100%"); 
    ... 
}

我试图“警报”照片的价值之前和之后$('.img-product').css("background-image", "url("+photo+")");声明，它工作正常。

这是结果时，有一个以上报价

这是结果，当搜索返回单个项目

来源

2017-10-10 AxeOwl

请问您可以验证图像的路径吗？因为在两张屏幕截图中都没有显示相同的图像？ – Rex

两种情况下路径都是相同的。如果我只搜索荣誉9（在屏幕截图中有img的项目），背景还没有设置 – AxeOwl

您是否在代码运行之前等待页面加载完成？ – theGleep

$(document).ready(function() { 
      code... 
      $('input#search_button').click(function (e) { 
      ..code 
      e.preventDefault(); 
      e.stopPropagation(); 
       $.ajax({ 
       ajax call.. 
       success: function (data) { 
        ..code 
        for(var i = 0; i<offers.length; i++) 
      { 
       var offer = offers[i]; 
       var photo = photos[i]; 
       $('.img-product').css("background-image", "url("+photo+")"); 
       $('.img-product').css("background-size", "100% 100%"); 
       ... 
      } 
} 
)}; 
)};

When I search only one item

来源

2017-10-10 20:50:21 AxeOwl

，因为php控制器发送到ajax双数组与json响应。提供阵列和照片阵列。所以我必须通过数据数组来获取它们。但所有的客户端控制器工作正常。我已经测试过了 – AxeOwl

你能解释一下吗？所有变量都正确地插入到数组中。我已经通过php和js来打印它们。 – AxeOwl

以前 - > https：//...amazonaws.com/.../bcaa09bc8df92c78a70a07ae85973c87.png search-results.js：81 after - > https：//....amazonaws.com/ .. ./bcaa09bc8df92c78a70a07ae85973c87.png 搜索results.js：79 before--> HTTPS：//....amazonaws.com/.../a3621f6036e436b9aebf486fe7e51048.jpeg 搜索results.js：81 后 - > https：//....amazonaws.com/.../a3621f6036e436b9aebf486fe7e51048.jpeg – AxeOwl

var strong = document.createElement("strong"); 
      var founds_nbr = document.createTextNode(offers.length); 
      var founds_txt = document.createTextNode(" offerte trovate"); 
      strong.appendChild(founds_nbr); 
      founds.appendChild(strong); 
      founds.appendChild(founds_txt); 
      for(var i = 0; i<offers.length; i++) 
      { 
       var photo = photos[i]; 
       var offer = offers[i]; 

       var a = document.createElement("a"); 
       var article = document.getElementById("offer"); 
       var img_div = document.createElement("div"); 
       var container = document.createElement("div"); 
       var name = document.createElement("h4"); 
       var price_div = document.createElement("div"); 
       var offer_price = document.createElement("h1"); 
       var old_price = document.createElement("span"); 
       var expired_time = document.createElement("span"); 
       var title_text_node = document.createTextNode(offer.name); 
       var price_text_node = document.createTextNode(offer.price); 
       var old_price_text_node = document.createTextNode("35,00"); 
       var deadline_text_node = document.createTextNode(offer.deadline); 


       a.setAttribute("href","ProductPage/"+offer.id_offer); 
       /*article.setAttribute("class", "offer clearfix"); 
       article.setAttribute("id", "offer");*/ 
       article.setAttribute("style","visibility: visible"); 
       img_div.setAttribute("class", "img-product"); 
       container.setAttribute("class", "container-right clearfix"); 
       name.setAttribute("class", "offer-title"); 
       price_div.setAttribute("class", "price clearfix"); 
       offer_price.setAttribute("class", "offer-price"); 
       old_price.setAttribute("class", "del-price"); 
       expired_time.setAttribute("class", "expiredtime"); 
       $('.img-product').css({"background-image":"url("+photo+")", "background-size":"100% 100%"}); 
       console.log($('.img-product')); 
       name.appendChild(title_text_node); 

       offer_price.appendChild(price_text_node); 

       old_price.appendChild(old_price_text_node); 

       expired_time.appendChild(deadline_text_node); 
       price_div.appendChild(offer_price); 
       price_div.appendChild(old_price); 

       container.appendChild(name); 
       container.appendChild(price_div); 
       container.appendChild(expired_time); 

       article.appendChild(img_div); 
       article.appendChild(container); 

       a.appendChild(article); 

       var container = document.getElementById("container"); 
       container.appendChild(a); 
      }

@headmax

来源

2017-10-10 21:10:56 AxeOwl

var photos = data [1];之前和之后打印Console.log消息。 var offers = data [0]; – AxeOwl

JQuery不设置背景图像第一次

回答

相关问题