jquery.css 背景图片不附加答案

【问题标题】：jquery.css background image not appendingjquery.css 背景图片不附加
【发布时间】：2018-06-16 11:18:15
【问题描述】：

我似乎很难将动态图像作为 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 + ")");

它失败了。

任何帮助都会很棒！

【问题讨论】：

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

标签： jquery css image dynamic background

【解决方案1】：

您没有在查询字符串中关闭 stockDiv。我认为背景图像没有设置为正确的元素。我将其更改为 stockDiv。下面是更新的sn-p

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

    }

  }

});

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

<div class="gallery">Test</div>

【讨论】：

【解决方案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>

【讨论】：

嘿查丹！我实际上是在使用 Sass 来构建它，尽管 .css 是链接的。不确定这是否会搅乱水域。 .stockItem 在我的 scss 中确实有样式，并且我正在显示插图。我会试一试！

【解决方案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>

但是，如果这不是您的意思，并且您尝试在插入之前将背景直接附加到 #stockDiv，那么这可能就是您的意思正在寻找：

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

上面的 sn-ps 都可以工作。希望对您有所帮助！

【讨论】：

嗨，里根，这些是动态创建的 div，我需要它来保持这种方式来设置图像。我回去尝试了这种方式，但仍然失败。不知道这里发生了什么。我正在用 sass 写这个，这可能是问题吗？
上面的第二个 sn-p 做了你想做的事情并用动态图像做，所以我不认为动态图像部分是你看到的问题。第二个问题 - 上面@chandan 指出 - 如果您没有在 CSS（或 SASS）中指定具有背景图像的 DIV，则它没有任何高度或宽度，因此没有高度或宽度它就赢了不出现。上面的 HTML 示例具有高度和宽度，这是我能够看到它工作的另一个原因。您是否在 DIV 上设置了高度和宽度？

【解决方案4】：

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

非常感谢！

【讨论】：