如何在表行中隐藏值并在单击加号时显示它

Question

我试图隐藏我的其中一列的表值，因为它具有10个以上的值，并且仅在单击加号时显示。 否则，当您单击减号时，它将隐藏列值

我对此的尝试如下。 它有效，但不是我想要的方式。 单击加号时，它仅显示第一个值，而不显示其余值。 我对JS的了解不多，有人可以给我更多有关如何处理此问题的线索吗？

这是我的代码

HTML

<table>
  <thead>
         <tr>
            <th>Forms</th>
         </tr>
     </thead>
     <tbody>

        <tr>
         <td id="details-control" class="details-open">

   <span id='content' class="d-none"><?= $row->getElement()?><br> </span>
  </td>

            </tr>
        </tbody>

CSS

td.details-open {
    background: url("../img/details_open.png") no-repeat center center;
    cursor: pointer;
}
td.details-close {
    background: url("../img/details_close.png") no-repeat center center;
}

我的剧本

    $(document).ready(function(){
    $('#details-control').on('click', function (e) {
        $("#content").removeClass("d-none")
        $("#details-control").removeClass("details-open")
        $("#details-control").addClass("details-close")

    });
});

Answer 1

该问题有两个原因。 首先，当它们在DOM中必须唯一时，您要在多个位置重复相同的id 。 如果要按共同目的或行为对元素进行分组，请将其更改为类。

其次，您试图在单击一个单元格时选择所有的#content和#details-control元素。 您需要使用DOM遍历来查找与被单击的单元格相关的内容。 为此，请使用this关键字。

话虽如此，请尝试以下示例。 请注意，仅添加颜色是为了使效果更明显，因为图像URL在此站点上将不起作用。

 $(document).ready(function() { $('.details-control').on('click', function(e) { var $cell = $(this).toggleClass('details-open details-closed'); $cell.find('.content').toggleClass('d-none'); }); }); 

 td.details-open { background: url("../img/details_open.png") no-repeat center center; cursor: pointer; color: #C00; } td.details-close { background: url("../img/details_close.png") no-repeat center center; color: #CCC; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>ID</th> <th>Forms</th> </tr> </thead> <tbody> <tr> <td> Key #1 </td> <td class="details-control details-open"> <span class="content d-none">Name #1<br> </span> <span class="content d-none">Name #2<br> </span> </td> </tr> <tr> <td> Key #2 </td> <td class="details-control details-open"> <span class="content d-none">Name #3<br> </span> <span class="content d-none">Name #4<br> </span> <span class="content d-none">Name #5<br> </span> </td> </tr> </tbody> </table>