Javascript 数组和div的问题

当我使用此代码时，标题没有显示任何图像，我不确定我做错了什么，这只是给我带来麻烦的代码，上面或下面没有遗漏任何内容

<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');">

var image=newarray（）；
图像[0]=“header1.png”；
图像[1]=“header2.png”；
图像[2]=“header3.png”；
图像[3]=“header4.png”；
变量大小=image.length
var x=Math.floor（大小*Math.random（））
$（'#random'）.attr（'src'，image[x]）；

您的问题：

<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');">

• 脚本在渲染目标div之前运行，因此它没有任何要渲染的内容-请尝试将脚本标记放在div之后
• 您没有正确地将div作为目标-您正在使用$（“#random”）来选择id为“random”的元素，而该元素并不存在
• 背景图像正在尝试解析url“random”，但无法解析

更好的方法是直接设置“背景图像”样式属性。大概是这样的：

<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');">

<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渲染后执行
var image=newarray（）；
图像[0]=“header1.png”；
图像[1]=“header2.png”；
图像[2]=“header3.png”；
图像[3]=“header4.png”；
变量大小=image.length
var x=Math.floor（大小*Math.random（））
var backgroundImageFile=image[x]；/'标题1.png'
var backgroundImageUrl=“url（“+backgroundImageFile+”）”；//url（'header1.png'）
$（“#标题图像”）.css（'background-image'，backgroundImageUrl）；

您的问题：

<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');">

• 脚本在渲染目标div之前运行，因此它没有任何要渲染的内容-请尝试将脚本标记放在div之后
• 您没有正确地将div作为目标-您正在使用$（“#random”）来选择id为“random”的元素，而该元素并不存在
• 背景图像正在尝试解析url“random”，但无法解析

更好的方法是直接设置“背景图像”样式属性。大概是这样的：

<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');">

<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渲染后执行
var image=newarray（）；
图像[0]=“header1.png”；
图像[1]=“header2.png”；
图像[2]=“header3.png”；
图像[3]=“header4.png”；
变量大小=image.length
var x=Math.floor（大小*Math.random（））
var backgroundImageFile=image[x]；/'标题1.png'
var backgroundImageUrl=“url（“+backgroundImageFile+”）”；//url（'header1.png'）
$（“#标题图像”）.css（'background-image'，backgroundImageUrl）；

似乎OP可能假设

背景图像：url（'random'）

将直接设置div的背景，以匹配ID为“random”的img元素（可能在页面的其他位置存在，也可能不存在）。当然，它不是这样工作的，但是如果一个人不真正理解

url（…）

在CSS中的作用，那么这是一个可以理解的错误。似乎OP可能假设

background image:url（'random'）

会将div的背景设置为与ID“random”匹配的img元素当然，这种方式不起作用，但是如果一个人不真正理解

url（…）

在CSS中的作用，那么这是一种可以理解的错误。