jquery - 无法使用 jquery 隐藏按钮单击时的 tr 元素

Question

我有两个按钮：#btn1和#btn2两个表格行：#tr1和#tr2。当用户单击按钮时，我将按钮设置为活动状态。

我的要求是：

• 当按钮是active我需要在tr.
• 当按钮是inactive我需要隐藏tr元素。

我怎样才能做到这一点？

用于启用按钮的 Jquery 代码：

$("#btn1").click(function () {
    $(this).toggleClass("buttonActive");
});
$("#btn2").click(function () {
    $(this).toggleClass("buttonActive");
});

html代码：

<tr id="tr1">
    <td><input type="text" name="val1" id="val1"/></td>
    <td><input type="text" name="val2" id="val2"/></td>
</tr>
<tr id="tr2">
    <td>
        <input type="text" name="val3" id="val3"/>
    </td>
</tr>

现在，如果 btn1 未激活，我需要隐藏 tr1，仅当 btn1 激活时才显示 tr1，btn2 也是如此。

Answer 1

您需要更改下面的css和jquery，检查它

$(document).ready(function(){
  $('#tr1').hide();
  $('#tr2').hide();
  $('#tr3').hide();
});

$("#btn1").click(function () {
         $(this).toggleClass("buttonActive");
         if($(this).hasClass("buttonActive")){
           $('#tr1').show();
         }
         else{
           $('#tr1').hide();
         }
    });
$("#btn2").click(function () {
         $(this).toggleClass("buttonActive");
         $('#tr2').show();
         if($(this).hasClass("buttonActive")){
           $('#tr2').show();
         }
         else{
           $('#tr2').hide();
         }
    });
$("#btn3").click(function () {
         $(this).toggleClass("buttonActive");
         $('#tr3').show();
         if($(this).hasClass("buttonActive")){
           $('#tr3').show();
         }
         else{
           $('#tr3').hide();
         }
    });    

.buttonInactive {
    background-color: #1E78AB;
    border: 1px solid #1E78AB;
    color: #fff;

}
.buttonInactive.buttonActive {
    background-color:#fff;
    border: 1px solid #1E78AB;
    color: #1E78AB;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="btn1" type="button" class="buttonInactive">Btn1</button>
<button id="btn2" type="button" class="buttonInactive">Btn2</button>
<button id="btn3" type="button" class="buttonInactive">Btn3</button>




<table>
  <tr id="tr1">
  <td>
  <input type="text" name="val1" id="val1" placeholder="val1"/></td>
  <td><input type="text" name="val2" id="val2" placeholder="val2"/></td>
  </tr>
  <tr id="tr2">
  <td>
  <input type="text" name="val3" id="val3" placeholder="val3"/></td>
  <td><input type="text" name="val4" id="val4" placeholder="val4"/></td>
  </tr>
  <tr id="tr3">
  <td>
  <input type="text" name="val5" id="val5" placeholder="val5"/></td>
  <td><input type="text" name="val6" id="val6" placeholder="val6"/></td>
  </tr>
</table>

Answer 2

您想在两个按钮单击事件中添加以下两行。

$("#tr1").toggle();
$("#tr2").toggle();

你的 jQuery 代码在这里：

jQuery(document).ready(function(){
    $("#tr1").hide();
    $("#tr2").hide();
  $("#btn1").click(function () {
    $(this).toggleClass("buttonActive");
    $("#tr1").show();
    $("#tr2").hide();
  });
  $("#btn2").click(function () {
    $(this).toggleClass("buttonActive");
    $("#tr1").hide();
    $("#tr2").show();
  });
});

如果您想显示/隐藏所有 tr 元素。您只需在下面添加一行

$("tr").toggle();