Question

几个小时前我发布了一个类似的问题，但我已经取得了一些突破（在我看来），我觉得我现在可以更好地解释。

首先，重要的是要说我所有的图像，我尝试编辑的图像都在单元格中。就像，细胞一样在HTML表格中的行内。

我有一个名为.disableMenu的类，它应该只是隐藏图片。这是那个班级 -

.disableMenu {
         visibility: hidden;
         }

它很简单，它就像一个魅力。所以基本上，我想要一个按钮，当按下它时，它会从元素中删除该类（在这种情况下，它是表中的单个单元格）。

以下是我尝试将其投入使用的单元格示例 -

<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">


  <tr >
       <td id="one" >
        <img  src="1.png" class="merge0">
            <script>
                src="js/bootstrap.js"
            </script>
                <script type="text/javascript">
                    function changeClass("disableMenu") {
                    var elem = document.getElementById("one");
                    elem.style.class = disableMenu;
                  }
                </script>
       </td>

现在，这是我试图触发此类更改的JS按钮 -

<button onclick="changeColor('disableMenu');">GO</button>

我真的很抱歉半发布这个和我普遍缺乏知识，但我正在努力学习（并且乐在其中）。

这里有完整的代码，如果有人想看看 -

<!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 {
         visibility: hidden;
         }
         .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="

      ">

      <div>
         <table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
            <tr >
               <td id="one" >
                <img  src="1.png" class="merge0">
                    <script>
                        src="js/bootstrap.js"
                    </script>
                        <script type="text/javascript">
                            function changeClass("disableMenu") {
                            var elem = document.getElementById("one");
                            elem.style.class = disableMenu;
                          }
                        </script>
               </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">
               </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">
               </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>

感谢您的关注，我们将非常感谢您的帮助。

Answer 1

elem.style.class = disableMenu;

这是一个大问题。没有名为＆＃34; class＆＃34;的样式属性。你想要：

elem.className = "disableMenu";

和

elem.className = "";

禁用它。

您也在调用错误的功能：

<button onclick="changeColor('disableMenu');">GO</button>

应该是

<button onclick="changeClass('disableMenu');">GO</button>

希望这有帮助！

===================

根据您在下面的评论我修复您的代码：

<script type="text/javascript">
    function changeClass("disableMenu") {
        var elem = document.getElementById("one");
        elem.className = "disableMenu";
        //I put this line in there so you could UNDO your changes.
        //Calling this immediately after the previous line will just undo what you did.
        //Remove it an you should be good (the line below)
        elem.className = ""; 

    }
</script>

Answer 2

我没有足够的代表评论，但建立在dudewad的回答 -

尝试使用此代码添加类：

<table id="table" border="0" cellpadding="0" cellspacing="5" align="center">
  <tr >
       <td id="one" >
           <p class="merge0">Hi</p>
        </td>
      </tr>
    </table>

<button onclick="myFunction()">Click me</button>

<script>

function myFunction() {
        var elem = document.getElementById("one");
        elem.className = "disableMenu";
}                       
</script>

使用JavaScript添加/删除单元类

2 个答案: