使用 JQuery 替换 td 数据

Question

我的一部分 table:

<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"注册被点击的cell的id，然后用.innerHTML.

把图片放到对应的同id名的div

说得更清楚：这是一款基于方块的游戏，可以建造 4 种类型的房屋。所以玩家点击一个方块，比如 A1，然后会出现一个弹出窗口，允许 him/her 到 select 房屋类型。例如，玩家点击单元格 A1，然后选择建造一个棚屋，因此我试图在单元格 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')+'"/>');
});

Answer 2

var cellClicked;
$("td").click(function(){
    cellClicked = $(this).children("div");
});
$("button").click(function(){
    cellClicked.html("<img src='some_image.jpg' />");
});

我假设您需要 4 个不同的图像，具体取决于您单击的类型，因此在 4 个 onclick 函数（addattap()、addshop()、addhdb()、addcondo()）中的每一个中添加 cellClicked.html 行) 分配不同的 jpg.

Answer 3

您可以使用元素 ID 来确定哪个图像

$('.show-popup').click(function(){
    // "this" is element click occurred on
    var id = this.id;
    var $img=$('<img>',{src: '/imgname' + id +'.jpg'});
    $(this).replaceWith($img);
});

此示例假定 id 在图像文件名中。根据需要调整

根据您的总体目标，在元素上切换 class 并使用 css

设置图像可能更容易

使用 JQuery 替换 td 数据

Using JQuery to replace td data

jquery

html-table