使用 JavaScript 添加和删除类答案

【问题标题】：Adding and removing classes with JavaScript使用 JavaScript 添加和删除类
【发布时间】：2014-10-01 03:59:23
【问题描述】：

所以我尝试使用 JavaScript 或任何其他不包括刷新页面的方法使拼图出现和消失。

我希望这样做的方式是简单地将类“disableMenu”添加到表格行（拼图是使用 HTML 表格构建的，这种方式非常简单）。

所以基本上我尝试做的是将 ID 添加到表行，并使用此 JavaScript 尝试从中删除类。它显然没有用。

$('table > 1').click(function () {
    $(this).toggleClass('disableMenu').siblings().removeClass('disableMenu');
});

$(document).click(function (e) {
    if ($(e.target).closest('table').length > 0) return;
    $('ul > li').removeClass('disableMenu');
});

这是我尝试使用的 JScript，这是我的完整 HTML 文档。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
   <head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="css/bootstrap.css" rel="stylesheet">
      <title>Complete the puzzle!</title>
      <style>
         .disableMenu {
         display: none;
         }
         .merge {
         position:absolute;
         left: 496px;
         top: 5px;
         }
         .merge0 {
         position:absolute;
         left:300px;
         top:4px;
         }
         .merge1 {
         position:absolute;
         top: 218px;
         left: 530px;

         }
         .merge2 {
         position:absolute;
         top: 218px;
         left: 688px;
         }
         .row1 {
         position:absolute;
         left: 301px;
         top: 208px;
         }
         .row2 {
         position:absolute;
         top: 476px;
         left: 301px;
         margin:0;
         }
         .row3 {
         position:absolute;
         top: 495px;
         left: 716px;
         margin:0;
         }
         .row4 {
         position:absolute;
         top: 691px;
         left: 300px;
         margin:0;
         }
      </style>
   <body style="

      ">

    <script>

    $('table > 1').click(function () {
    $(this).toggleClass('disableMenu').siblings().removeClass('disableMenu');
});

$(document).click(function (e) {
    if ($(e.target).closest('table').length > 0) return;
    $('ul > li').removeClass('disableMenu');
});

    </script>
      <div>
         <table id="table" border="0" cellpadding="0" cellspacing="0" align="center">
            <tr id="1">
               <td>
                  <img  src="1.png" class="merge0">
               </td>
               <td>
                  <img id="2" src="6.png" class="merge">
               </td>
               <td>
               </td>
            </tr>
            <tr>
               <td>
                  <img src="4.png" class="row1">
               </td>
               <td id="gone">
                  <img src="2.png" class="merge1 disableMenu">
               </td>
               <td>
                  <img src="7.png" class="merge2">
               </td>
            </tr>
            <tr>
               <td>
                  <img src="8.png" class="row2">
               </td>
               <td>
                  <img src="5.png" class="row3">
               </td>
               <td>
                  <img src="3.png" class="row4 disableMenu">
               </td>
            </tr>
         </table>
      </div>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.js"></script>
   </body>
   </head>
</html>

（对不起，该代码的大小，我不知道它到底有多少是相关的）。

任何帮助将不胜感激。最终，我希望当有人访问一个 URL 时，它会自动显示一个拼图。不过现在，我只是希望它能够被实施，但这是可能的。

提前致谢！

编辑：我只是不打算这样做，我很难过。不过，感谢您的努力！

【问题讨论】：

> 1 是什么意思？你是<1> 元素？
table > 1 不会匹配任何内容。如果您尝试将tr 与id="1" 匹配，您将需要table > #1。当然，由于 ID 是唯一的，#1 就足够了。或者你想匹配别的东西？
@PaulRoub 我正在尝试更改那个独特的上的类。所以如果我把table > 1改成table > #1，应该可以正常工作吧？编辑：天哪，我很愚蠢。我的意思是我试图改变那个独特的，而不是
老实说，我认为您以完全错误的方式处理此问题。您应该考虑用显露的拼图替换隐藏的拼图，而不是试图揭开现有的拼图。另外为了记录，仅在 JS 中这样做甚至都不是安全的，即使是知识渊博的人也可以轻松地揭示整个谜题。你可以看看这个作为起点：jsfiddle.net/calder12/aufrnag9
将 onclick 包装在 document.ready() 中