Question

我正在使用表格创建基于图块的游戏。在每个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为“小提琴”。

Answer 1

Shilly的评论有正确的想法。我不完全确定你的目标是什么，但这就是我所做的，看起来合理的是你所追求的目标。它应该让你开始。

<table>本身只有一个点击处理程序。它有效地委派了点击。这样可以节省内存，因为您没有为每个单元格创建复制/关闭。由于委托性质，它会花费一些性能，但对于点击处理程序，它通常是可以的。对于鼠标悬停处理程序，这是另一个主题。

有效地使用<template>标记可以让您DocumentFragment使用和标记为HTML，而不是使用JavaScript（这可能很乏味）。

我们将该文档片段克隆144次，将正确的描述（'ShopHouse', 'HDB Flat', 'Condo'等）注入模板的每个图章。每个克隆都附加到文档片段。完成我们的文档片段修改后，我们会通过board.appendChild(frag);将其注入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>

在144个不同的细胞上使用InnerHTML

1 个答案: