javascript - 在 144 个不同的单元格上使用 InnerHTML

Question

我正在使用表格创建一个基于图 block 的游戏。在每个 td 单元中，

 <td>
 <div id="image" style="display:none; display: fixed; right: 5; top:2;"><img src="http://thumb7.shutterstock.com/display_pic_with_logo/339217/339217,1272881114,1/stock-vector-hand-drawing-of-typical-house-along-the-canal-near-bangkok-in-thailand-52242874.jpgAttap"/></div>
<input id ="attap" type="submit" value="Show Div" onclick="showDiv(); if(submitted)this.disabled = true" />
<div id="welcomeDiv"  style="display:none;"> <input type="submit" name="answer" value="Show Div" onclick="showDiv3(); if(submitted)this.disabled = true" /></div>
<div id="welcomeDiv3"  style="display:none;"> <input type="submit" name="answer" value="Show Div" onclick="showDiv4(); if(submitted)this.disabled = true"" /></div>
<div id= "welcomeDiv4"  style="display:none;"><input type="submit" name="answer"   value="Show Div" onclick="showDiv5(); if(submitted)this.disabled = true"" />    </div>
</td>

Javascipt:

    function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
document.getElementById('image').style.display = "block";
submitted = true;
populationred +=20;
 document.getElementById('population').innerHTML = populationred;
} 
function showDiv3() {
document.getElementById('welcomeDiv3').style.display = "block";
document.getElementById("image").innerHTML = "'<img src='http://www.sgshophouses.com/images/Shophouses1.jpg'>'"
submitted = true;
 populationred +=50;
 document.getElementById('population').innerHTML = populationred;
 }
 function showDiv4() {
 document.getElementById('welcomeDiv4').style.display = "block";
 document.getElementById('image').innerHTML = "'<img src='http://singaporepropertylaunch.com.sg/wp-content/uploads/2015/04/HDB-resale-prices-fall-1.0.gif'>'"
  submitted = true;
    populationred +=100;
  document.getElementById('population').innerHTML = populationred;
  }

 function showDiv5() {
 document.getElementById('image').innerHTML = "'<img src='www.realestatechannel.com/assets_c/2010/06/Austonian-Condo-Tower-thumb- 120x238.jpg'>'"
submitted = true;
populationred +=200;
 document.getElementById('population').innerHTML = populationred;
}

我需要对 144 个单元重复此操作。然而，问题是，当单击 1 个按钮时，图像将仅显示在第一个单元格中，因此解决此问题的繁琐方法是对每个单元格的所有 div 进行不同的重命名。有没有更有效的方法？

您可以引用这里:www2.hci.edu.sg/t0104448b/cells.html 获取“ fiddle ”。

Answer 1

Shilly 的评论是正确的。我不完全确定你的目标是什么，但这就是我所做的，看起来很合理你所追求的。它应该可以帮助您入门。

<table> 上只有一个点击处理程序本身。它有效地委托(delegate)了点击。这可以节省内存，因为您不必为每个单元格创建副本/闭包。由于委托(delegate)性质，它会损失一些性能，但对于点击处理程序来说，通常是可以的。对于鼠标悬停处理程序，这是另一个主题。

使用 <template>标签有效地为您提供了 DocumentFragment 使用 HTML 进行标记，而不是使用 JavaScript(这可能很乏味)。

我们克隆该文档片段 144 次，将正确的描述( 'ShopHouse', 'HDB Flat', 'Condo' 等)注入(inject)模板的每个标记中。每个克隆都附加到一个文档片段。一旦我们的文档片段完成修改，我们通过 board.appendChild(frag); 将其注入(inject)到 DOM 中.

var board = document.getElementById('board');
var cellTmpl = document.getElementById('template-cell');
var cellTmplContent = cellTmpl.content;
var frag = document.createDocumentFragment(); // for performance

var submitted = false; // not sure what you intend to use this for

var descriptions = [ 'ShopHouse', 'HDB Flat', 'Condo' ]; // ... etc.

var cells = [];
for (var r = 0; r < 12; r++) {
  var row = [];
  cells.push(row);
  var tr = document.createElement('tr');
  frag.appendChild(tr);
  for (var c = 0; c < 12; c++) {
    var clone = document.importNode(cellTmplContent, true);
    var index = r * 12 + c;
    var description = index < descriptions.length ? descriptions[index] : 'Unknown place';
    clone.querySelector('p.description').innerText = description;
    tr.appendChild(clone);
    row.push(clone);
  }
}

board.appendChild(frag);
board.addEventListener('click', function(e) {
  var button = e.target;
  var td = button.parentElement;
  var img = td.querySelector('img');
  var p = td.querySelector('p.description');
  
  button.disabled = true;
  img.style.display = 'block';
  p.style.display = 'block';
  
  submitted = true;
});

// could do something with `cells` variable if you like. It's a two dimensional array of <td> elements

td {
  background: #ccc;
  border: 1px solid #000;
}
td > img {
  display: none;
  zoom: 0.2;
}
p.description {
  display: none;
}

<table id="board">
</table>

<template id="template-cell">
  <td>
    <img src="http://thumb7.shutterstock.com/display_pic_with_logo/339217/339217,1272881114,1/stock-vector-hand-drawing-of-typical-house-along-the-canal-near-bangkok-in-thailand-52242874.jpgAttap"/>
    <button>Show</button>
    <p class="description"></p>
  </td>
</template>