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

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

$("#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();

Answer 2

您需要在下面更改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>

无法使用jQuery在按钮单击上隐藏tr元素

2 个答案: