Question

我想点击字符＆＃34; - ＆＃34;将隐藏并转向＆＃34; +＆＃34;当我点击＆＃34; +＆＃34; ＆LT; ID =＆＃34; noidung＆＃34;＆GT;将显示并转向＆＃34; - ＆＃34;。这是我在View中的代码：

<tr style="">
      <td style="width:50%; background-color:#b4abab; height:20px">
       <a href="#" style="text-decoration:none"><b id="hide" style="font-size:20px">-</b><b hidden id="show" style="font-size:20px">+</b></a>
       <input style="margin-left:10px" id="ChkControllers" type="checkbox" name="ccc" value="@item.ID" />@item.Control
                        </td>
                    </tr>
<tr style="width:50%">

 <td id="noidung">
    @foreach (var lstAction in listAction)
             {

                if (ViewBag.SelectedRole != null)
                   {

                       <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" @Tolerance.ModelsAdmin.Utinity.GetActionByRoleControllers((int)@item.ID, ViewBag.SelectedRole, lstAction.ID) type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                            else
                            {
                               <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                        }
                    </td>
                </tr>

这是我的js代码

<script type="text/javascript">
$(document).ready(function () {

    $("#hide").click(function () {
        $("#noidung").hide();
        $("#hide").hide();
        $("#show").show();
    });
    $("#show").click(function () {

        $("#hide").show();
        $("#show").hide();
        $("#noidung").show();
    });

});

......

我想知道为什么我可以隐藏并显示在第一行？我怎么能用另一行呢？

Answer 1

根据您的问题，当您分别按 - ，+按钮时，似乎隐藏并显示行内容。

因此，如果每一行都有这些按钮，我们将尝试找出最近的兄弟姐妹与班级＆＃39; noidung＆＃39; 。那么我们可以应用我们的逻辑。因此，我没有将它分成两行，而是将其合并为一行

因此我们将拥有 - ，每行+按钮。我们将删除id并将其作为下面的类

<tr style="">
      <td style="width:50%; background-color:#b4abab; height:20px">
       <a href="#" style="text-decoration:none"><b class="hide" style="font-size:20px">-</b><b hidden class="show" style="font-size:20px">+</b></a>
       <input style="margin-left:10px" id="ChkControllers" type="checkbox" name="ccc" value="@item.ID" />@item.Control
                        </td>

 <td class="noidung">
    @foreach (var lstAction in listAction)
             {

                if (ViewBag.SelectedRole != null)
                   {

                       <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" @Tolerance.ModelsAdmin.Utinity.GetActionByRoleControllers((int)@item.ID, ViewBag.SelectedRole, lstAction.ID) type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                            else
                            {
                               <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                        }
                    </td>
                </tr>

现在我们将为+， - 按钮添加事件

<script type="text/javascript">
$(document).ready(function () {

    $(".hide").click(function () {
       $('.hide', $(this).closest(".noidung")).hide();
        $(".hide").hide();
        $(".show").show();
    });
    $(".show").click(function () {

        $('.show', $(this).closest(".noidung")).show();
        $(".show").hide();
        $(".hide").show();
    });

});

Answer 2

Run Demo

尝试，

替换

<a href="#" style="text-decoration:none"><b class="hide" style="font-size:20px">-</b><b hidden class="show" style="font-size:20px">+</b></a>

与

 <a href="#" style="text-decoration:none" class='displayShowHide'>-</a>

您的新HTML应

<tr style="">
      <td style="width:50%; background-color:#b4abab; height:20px">
       <a href="#" style="text-decoration:none" class='displayShowHide'>-</a>
       <input style="margin-left:10px" id="ChkControllers" type="checkbox" name="ccc" value="@item.ID" />@item.Control
                        </td>
                    </tr>
<tr style="width:50%">

 <td id="noidung">
    @foreach (var lstAction in listAction)
             {

                if (ViewBag.SelectedRole != null)
                   {

                       <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" @Tolerance.ModelsAdmin.Utinity.GetActionByRoleControllers((int)@item.ID, ViewBag.SelectedRole, lstAction.ID) type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                            else
                            {
                               <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                        }
                    </td>
                </tr>

在脚本中添加

$(function () {
    $('.displayShowHide').on('click',function(){
        if($(this).text() == '-')
            $('a').text('+');
        else
          $('a').text('-');

    });
});

如何使用jQuery隐藏和表显示？

2 个答案: