Question

所以我正在尝试使用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>

（很抱歉该代码的大小，我不确切知道其中有多少相关）。

任何帮助将不胜感激。最终，我喜欢这样，当有人访问网址时，它会自动显示一个拼图。但就目前而言，我只是希望它能够实现，但是可行。

提前致谢！

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

Answer 1

尝试在div结束后在主体底部添加脚本标记或在

中添加代码

$(document).ready();

使用JavaScript添加和删除类

1 个答案: