Question

我正在尝试将所有图块的背景URL设置为内存数组中的名称。

我试过了：

document.getElementById('tile_' + i).style.background = 'url(' + memory_array[i] + ') no-repeat';;

但这不起作用！

我不确定将数组名称放在哪...我认为url(img.gif)是正确的？

var memory_array = ['url(img1.gif)', 'img1.gif', 'img2.gif', 'img2.gif', 'img3.gif', 'img3.gif', 'img4.gif', 'img4.gif', 'img5', 'img5'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;

Array.prototype.memory_tile_shuffle = function() {
  var i = this.length,
    j, temp;
  while (--i > 0) {
    j = Math.floor(Math.random() * (i + 1));
    temp = this[j];
    this[j] = this[i];
    this[i] = temp;

  }
}

function newBoard() {
  tiles_flipped = 0;
  var output = '';
  memory_array.memory_tile_shuffle();
  for (var i = 0; i < memory_array.length; i++) {
    output += '<div id="tile_' + i + '" onclick="memoryFlipTile(this,\'' + memory_array[i] + '\')"></div>';


  }
  document.getElementById('memory_board').innerHTML = output;
  
  // This is the relevant line
  document.getElementById('tile_' + i).style.background = 'url(' + memory_array[i] + ') no-repeat';
}

function memoryFlipTile(tile, val) {
  if (tile.innerHTML == "" && memory_values.length < 2) {
    tile.style.background = 'url(qm.gif) no-repeat';
    tile.innerHTML = val;
    if (memory_values.length == 0) {
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
    } else if (memory_values.length == 1) {
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      if (memory_values[0] == 1) {
        tiles_flipped += 2;
        //Clear both arrays
        memory_values = [];
        memory_tile_ids = [];
        // Check to see if the whole board is cleared
        if (tiles_flipped == memory_array.length) {
          alert("Well done your a smart person ... Can you do it again ?");
          document.getElementById('memory_board').innerHTML = "";
          newBoard();
        }
      } else {
        function flip2back() {
          //Flip the 2 tiles back over 
          var tile_1 = document.getElementById(memory_tile_ids[0]);
          var tile_2 = document.getElementById(memory_tile_ids[1]);
          tile_1.style.background = 'url(qm.gif) no-repeat';
          tile_1.innerHTML = "";
          tile_2.style.background = 'url(qm.gif) no-repeat';
          tile_2.innerHTML = "";
          // Clear both array
          memory_values = [];
          memory_tile_ids = [];
        }
        setTimeout(flip2back, 700);
      }
    }



  }




}

div#memory_board {
  background: black;
  border: 1px solid black;
  width: 900px;
  height: 540px;
  padding: 24px;
  margin: 0px auto;
  margin-bottom: 10px;
}
div#memory_board > div {
  background: url(qm.gif) no-repeat;
  background-size: 100% 100%;
  border: 1px solid #fff;
  width: 120px;
  height: 120px;
  float: left;
  margin: 8px;
  padding: 20px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  color: white;
  border-radius: 5px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Basic Java</title>
  <link href='style.css' type='text/css' rel='stylesheet' />
  <script src="java.js"></script>
</head>

<body>
  <!--HEADER-->
  <div class='holder header'>
    <h1>Simple picture guessing game</h1>
  </div>
  
  <!--Container-->
  <div id='memory_board'>
    <script>
      newBoard();
    </script>
    <!--Add window.addEventListener() for window load.-->
  </div>

  <!--footer-->
  <div class='holder footer'>

  </div>
</body>
</html>

Answer 1

//这是相关的行

该行应为

document.getElementById('tile_' + i).style.background = 'url(' + memory_array[i] + ') no-repeat';

你的数组应该是

var memory_array = ['img1.gif', 'img1.gif', 'img2.gif', 'img2.gif', 'img3.gif', 'img3.gif', 'img4.gif', 'img4.gif', 'img5.gif', 'img5.gif'];

还要确保图像的路径正确

或者，您可以使用backgroundImage

document.getElementById('tile_' + i).style.backgroundImage = 'url(' + memory_array[i] + ')';

Answer 2

这里几件事您可以考虑将newBoard函数的代码更改为以下

function newBoard() {
  tiles_flipped = 0;
  var output = '';
  memory_array.memory_tile_shuffle();
  for (var i = 0; i < memory_array.length; i++) {
    output += '<div id="tile_' + i + '" onclick="memoryFlipTile(this,\'' + memory_array[i] + '\')"></div>';


  }
  document.getElementById('memory_board').innerHTML = output;

  // This is the relevant line
  var title=document.getElementById('tile_' + i);
 var imageUrl=url(memory_array[i] + 'no-repeat');
  title.style.backgroundImage = imageUrl;
}

始终将dom搜索存储到变量中，然后对变量进行操作。例如：var title = document.getElementById（＆＃39; tile _＆＃39; + i）;

希望这有帮助

使用for循环使用Javascript设置背景图像

2 个答案: