Jquery 在表内使用#infotoggler切换多个图像集_Jquery_Html

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

jquery html

Jquery 在表内使用#infotoggler切换多个图像集,jquery,html,Jquery,Html,我正在尝试为慈善游戏之夜创建一个基于网络的记分卡。玩家图像将用于记录分数/回合。当一个玩家“死亡”时，我希望能够点击他们的脸，并用一张喜剧死亡照片来代替所以，我开始使用 $("#infoToggler").click(function() { $("#infoToggler img").toggle(); 在标题中，然后在每个字符框中使用 <td> <div id="infoToggler"> <img src="PLAYER1.jpg" /&g

我正在尝试为慈善游戏之夜创建一个基于网络的记分卡。玩家图像将用于记录分数/回合。当一个玩家“死亡”时，我希望能够点击他们的脸，并用一张喜剧死亡照片来代替

所以，我开始使用

$("#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个玩家中的每一个设置代码吗？非常感谢您的帮助

如果在同一页面上有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>

演示：

根据评论，您的标签位置也有问题。您应该在jQuery的链接之后，该链接应该在结束正文标记之前。这里有一个大致的轮廓：

<!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>


标题
//您的自定义JavaScript在这里

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

如果我正确理解您的问题，您的代码将更改所有玩家的映像。如果是这种情况，请尝试以下操作：

$（'#infoToggler'）。单击（function（）{$（this）.find（'img'）.toggle（）}）

如果不是这种情况，您需要提供有关html结构的更多信息。因此，我现在将其作为

我得到了基本图片，但没有任何内容。是的，HTML将适用于每个玩家。再次复制并粘贴JavaScript以确保正确。仍然只获取原始图像。我能成为一个讨厌鬼，就标题文本的确切内容征求虚拟级别的建议吗？（我可以把整件事发布到某个地方，但它太冗长了）我编辑了答案，将JavaScript绑定放在$（function（）{…}中因此，绑定在DOM准备就绪后发生。请使用修订后的JavaScript重试。您的问题可能是JS执行得太早，这将解决此问题。仍然没有。我的整个头是..选择{font size:30px；}输入{size:10；font size:20px；}$（function（）{$（'.infoToggler'）。单击（function（）{$（this.find（'img'）.toggle（）；}）；