Question

我正在尝试为慈善游戏之夜创建一个基于网络的记分卡。玩家图像将用于跟踪得分/转弯。当玩家“死”时，我希望能够点击他们的脸，并用喜剧死亡照片替换它。

所以，我开始使用

$("#infoToggler").click(function() {
    $("#infoToggler img").toggle();

在标题中，然后在每个字符框中使用

<td>
    <div id="infoToggler"> <img src="PLAYER1.jpg" /> <img src="Player1dead.jpg"
    style="display:none"/> 
     </div>
     <br>
      <input size="9" type="text"> </td>

显然每个角色都有变化。这是在本地机器上运行的，图像只有120px，因此加载时间不是问题。

没有训练，这实际上是 pick-n-stich 编码，所以我可以用手做。我错过了明显出血的东西吗？我是否需要为10个玩家中的每一个设置代码？非常感谢！

Answer 1

如果您在同一页面上可以看到10个玩家，则需要将infoToggler从ID更改为类，因为页面上没有两个元素可以共享相同的ID。

然后，您可以提供将在单击该类的任何TD时执行的处理程序。在处理程序中，查找并切换该TD中的任何图像。

此示例适用于多个玩家图像：

<强>的JavaScript

$(function() {
    $('.infoToggler').click(function() {
        $(this).find('img').toggle();
    });
});

<强> HTML

<table>
    <tr>
        <td>
            <div class="infoToggler">
                <img src="http://lorempixel.com/200/300/people/6/" />
                <img src="http://placehold.it/200x300/dddddd" style="display:none" />
            </div>
            <br />
            <input size="9" type="text" />
        </td>
        <td>
            <div class="infoToggler">
                <img src="http://lorempixel.com/200/300/people/8/" />
                <img src="http://placehold.it/200x300/dddddd" style="display:none" />
            </div>
            <br />
            <input size="9" type="text" />
        </td>
        <td>
            <div class="infoToggler">
                <img src="http://lorempixel.com/200/300/people/9/" />
                <img src="http://placehold.it/200x300/dddddd" style="display:none" />
            </div>
            <br />
            <input size="9" type="text" />
        </td>
    </tr>
</table>

演示：http://jsfiddle.net/BenjaminRay/k7bLwc70/

根据评论，您的标签展示位置也存在问题。你应该在jQuery链接之后，它应该在关闭body标签之前。这是一个粗略的轮廓：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <!-- Link to style sheets here -->
  </head>
  <body>
    <!-- body content -->

    <!-- JavaScript before </body> tag -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
    // Your custom JavaScript here
  </script>
  </body>
</html>

Answer 2

您有10个具有相同ID的div，切换事件将切换所有10个您需要不同的ID或类并选择子图像

使用表内的#infotoggler切换多个图像集

2 个答案: