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不設置背景圖像第一次

回答

相關問題