jquery - 使用JQuery替换td数据

Question

我的表格的一部分:

<th>1</th>
<td>
 <div id="div_A1">
  <a class="show-popup" href="#" data-showpopup="1" id="A1">Select This Tile</a>
 </div>
</td>
<td id="forest">
 <div id="div_A2">
  <a class="show-popup" href="#" data-showpopup="1" id="A2" >Select This Tile</a>
 </div>
</td>
<td id="forest">
 <div id="div_A3">
  <a class="show-popup" href="#" data-showpopup="1" id="A3" >Select This Tile</a>
 </div>
</td>
<td>
 <div id="div_A4">
  <a class="show-popup" href="#" data-showpopup="1" id="A4">Select This Tile</a>
 </div>
</td>

我有一个按钮，

<div class="overlay-content popup1">
 <div class="buildings">
  <div id="navcontainer">
   <ul>
    <li><button id="attap" onclick="addattap()">Shack</button></li>
    <li><button id="shop" onclick="addshop()">Shop-house</button></li>
    <li><button id="hdb" onclick="addhdb()">HDB Flat</button></li>
    <li><button id="condo" onclick="addcondo()">Condominium</button></li>
   </ul>
  </div>
 </div>
 <button class="close-btn">Close</button>
</div>

我正在尝试创建一个界面，以便程序能够记住单击了哪个单元格，然后使用按钮将图像插入到单元格中相应的单元格中。我正在考虑使用“event.target.id”来注册被单击的单元格的id，然后使用.innerHTML将图像放入具有相同id名称的相应div中。

更清楚地说:这是一款基于图 block 的游戏，可以 build 4 种类型的房屋。因此，玩家单击一个图 block ，例如 A1，然后会出现一个弹出窗口，允许他/她选择房屋类型。例如，玩家单击单元格 A1，然后选择 build 一个小屋，因此我尝试在单元格 A1 处显示小屋的图像。但有单元格 A1-A4，因此代码应该能够识别出图像所在的单元格是 A1，而不是其他 3 个单元格。

Answer 1

因此，如果您向表示要添加的图像的按钮添加数据属性 -

$('.show-popup').click (function (){
  $(this).data ('clicked', true);
});

$('button').click (function (){
    $('[data-clicked=true]').parents ('div').html ('<img src="'+$(this).data ('img-src')+'"/>');
});