Question

我似乎很难将动态图像作为div的背景图像。我尝试了几件事，但都失败了。

url确实在控制台日志中上拉，这在作为图像附加时确实有效，而不是作为背景img。 ID会附加，但它似乎甚至没有读取背景图像css。

 $(document).ready(function() {

var heroImage = [
                    {

                    }

                ];

var itemList = [
                        {
                          "itemImage": "../images/trend/greenpants.jpg",

                          "itemName": "Green Pants",

                          "itemType": "pants", "itemClass":

                          "trend", "itemDep" : "male"

                        },
                        {

                          "itemImage":"../images/collection/whitecoat.jpg",

                          "itemName" : "Snow Coat",

                          "itemType": "coat",

                          "itemClass": "collection",

                          "itemDep" : "female"

                        }

                ];



 for (var i = 0, len = itemList.length; i < len; i++)

      {

        if (itemList[i].itemDep === "female")

        {

          console.log(itemList[i].itemImage);

          let image = itemList[i].itemImage;


        let stockDiv = $('<div id = "stockDiv">');

            $('#stockItem').css({"background-image": "url("+image+")"});

            $(".gallery").append(stockDiv);

        }

    }

});

我也试过它

$('#stockItem').css("background-image": "url(" + image + ")");

它失败了。

任何帮助都会很棒！

Answer 1

您没有在查询字符串中关闭stockDiv。我认为，背景图像没有设置为正确的元素。我把它改成了stockDiv。以下是更新的代码段

＆＃13;

$(document).ready(function() {

  var heroImage = [{

    }

  ];

  var itemList = [{
      "itemImage": "../images/trend/greenpants.jpg",

      "itemName": "Green Pants",

      "itemType": "pants",
      "itemClass":

        "trend",
      "itemDep": "male"

    },
    {

      "itemImage": "../images/collection/whitecoat.jpg",

      "itemName": "Snow Coat",

      "itemType": "coat",

      "itemClass": "collection",

      "itemDep": "female"

    }

  ];


  for (var i = 0, len = itemList.length; i < len; i++)

  {

    if (itemList[i].itemDep === "female")

    {

      console.log(itemList[i].itemImage);

      let image = itemList[i].itemImage;


      let stockDiv = $('<div id = "stockDiv"></div>');
      stockDiv.css('backgroundImage', 'url(' + image + ')');

      $(".gallery").append(stockDiv);

    }

  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="gallery">Test</div>

＆＃13;

Answer 2

@Gracie - 背景图片即将来临。我认为你需要提供风格。我在html中加载了相同的代码并且它有效。

<html>

<head>
  <style>
    #stockItem {
      width: 50%;
      height: 50%;
      color: red
    }
  </style>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {

      var heroImage = [{

        }

      ];

      var itemList = [{
          "itemImage": "https://dummyimage.com/600x400/000/fff",

          "itemName": "Green Pants",

          "itemType": "pants",
          "itemClass":

            "trend",
          "itemDep": "male"

        },
        {

          "itemImage": "https://dummyimage.com/600x400/000/fff",

          "itemName": "Snow Coat",

          "itemType": "coat",

          "itemClass": "collection",

          "itemDep": "female"

        }

      ];



      for (var i = 0, len = itemList.length; i < len; i++)

      {

        if (itemList[i].itemDep === "female")

        {

          console.log('chandan', itemList[i].itemImage);

          let image = itemList[i].itemImage;


          let stockDiv = $('<div id = "stockDiv">');
          console.log(stockDiv)
          $('#stockItem').css({
            "background-image": "url('" + image + "')"
          });
          $(".gallery").append(stockDiv);

        }

      }

    });
  </script>
  <div id="stockDiv">
    <div id="stockItem">
      test
    </div>
  </div>
</body>

</html>

Answer 3

查看您的JavaScript我假设＃stockItem 和 .gallery 是在脚本运行之前HTML中已有两个DIV？或 #stockItem 是一个错字，试图抓住你在其上方的线上所做的 #stockDiv ？

假设 #stockDiv 和 #stockItem 不是拼写错误，我编写了以下HTML并为我加载了背景：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <style>
    #stockItem, #stockDiv, .gallery {
      width: 200px;
      height: 200px;
    }

  </style>
  <script>
    // (Your script here)
  </script>
</head>
<body>
  <div class="gallery"></div>
  <div id="stockItem"></div>
</body>
</html>

但是，如果这可能是你正在寻找的东西：

for (var i = 0, len = itemList.length; i < len; i++) {
  if (itemList[i].itemDep === "female") {
    console.log(itemList[i].itemImage);

    let image = itemList[i].itemImage;

    let stockDiv = $('<div id = "stockDiv">').css({"background-image": "url("+image+")"});

    $(".gallery").append(stockDiv);
  }
}

上述两个片段都有效。希望有所帮助！

Answer 4

里根的回答奏效了。事实证明，当我使用该代码但需要填充时，它正在工作。能够动态地给它一个类并添加该填充。

非常感谢！

jquery.css背景图片没有追加

4 个答案: