Question

当我使用这个代码时，标题没有显示任何图像，我不知道我做错了什么，这只是给我带来麻烦的代码我不会错过任何高于或低于它的东西。

<script>
  var image = new Array ();
  image[0] = "header1.png";
  image[1] = "header2.png";
  image[2] = "header3.png";
  image[3] = "header4.png";
  var size = image.length
  var x = Math.floor(size*Math.random())
  $('#random').attr('src',image[x]);
</script>
<div class="header-img background-cover"  style="background-image: url('random');">

Answer 1

你的问题：

脚本在呈现目标div之前运行，因此无需渲染 - 尝试将脚本标记放在div之后。
您没有正确定位div - 您正在执行$（“＃random”）选择ID为“random”且不存在的元素
背景图片正在尝试解析网址“随机”，这将无法解决。

更好的方法是直接设置“background-image”样式属性。像这样：

<div id="header-image" class="header-img background-cover">
<script>
  // this now executes after the div has rendered
  var image = new Array ();
  image[0] = "header1.png";
  image[1] = "header2.png";
  image[2] = "header3.png";
  image[3] = "header4.png";
  var size = image.length
  var x = Math.floor(size*Math.random())
  var backgroundImageFile = image[x];   // 'header1.png'
  var backgroundImageUrl = "url('" + backgroundImageFile + "')";   // url('header1.png')
  $('#header-image').css('background-image', backgroundImageUrl);
</script>

数组和div的问题

1 个答案: