Question

我尝试使用JQuery将背景图像设置为div。如果有多个图像，它可以工作，但如果只有一个图像，它就无法工作。

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%");
   ...
}

我试图提醒＆＃34;警告＆＃34; $('.img-product').css("background-image", "url("+photo+")");语句之前和之后的照片值，它可以正常工作。

当有多个商品

时，这是结果

这是搜索返回单个项目时的结果

Answer 1

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

Answer 2

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

JQuery第一次没有将背景图像设置为div

2 个答案: