Jquery 显示/隐藏多层切换-未定义状态_Jquery

Jquery 显示/隐藏多层切换-未定义状态

jquery

Jquery 显示/隐藏多层切换-未定义状态,jquery,Jquery,例如：标题数据显示资料 $（文档）.ready（函数（）{ $（'.h1_header\u competitor\u 1'）。更改（函数（）{ log（$（this.prop（“选中”））； jQuery（'.h1_no_header_competitor_1'）。切换（'slow'）； }); $（'.h1\无\头\竞争对手\ 1'）。更改（函数（）{ log（$（this.prop（“选中”））； jQuery（'.h1_no_header_competitor_1_list'）。

例如：


标题
数据显示
资料
$（文档）.ready（函数（）{
$（'.h1_header\u competitor\u 1'）。更改（函数（）{
log（$（this.prop（“选中”））；
jQuery（'.h1_no_header_competitor_1'）。切换（'slow'）；
});
$（'.h1\无\头\竞争对手\ 1'）。更改（函数（）{
log（$（this.prop（“选中”））；
jQuery（'.h1_no_header_competitor_1_list'）。切换（'slow'）；
});
});

类似于下面的代码片段


标题
数据显示
资料
$（文档）.ready（函数（）{
$（'.h1_标题_竞争对手_1'）。更改（函数（）{
log（$（this.prop（“选中”））；
jQuery（'.h1_no_header_competitor_1'）。切换（'slow'）；
});
$（'.h1\无\头\竞争对手\ 2'）。更改（函数（）{
log（$（this.prop（“选中”））；
jQuery（'.h1_no_header_competitor_1_list'）。切换（'slow'）；
});
});

因为tr没有检查道具

<!DOCTYPE html>


<html lang="en">
<head>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.5.0/js/bootstrap4-toggle.min.js"></script>
</head>


标题
数据显示
资料


$（文档）.ready（函数（）{
$（'.h1_标题_竞争对手_1'）。更改（函数（）{
log（$（this.prop（“选中”））；
jQuery（'.new_x_class'）。toggle（'slow'）；
});
$（'.h1\无\头\竞争对手\ 1'）。在（'change'，function（）上{
log（$（this.prop（“选中”））；
jQuery（'.h1_no_header_competitor_1_list'）。切换（'slow'）；
});
});

您需要为第二个切换按钮定义类名

h1\u无\u标题\u竞争对手\u 2

。

    <table class="table table-sm table-borderless table-dark text-center mt-5">
   <tbody>
      <tr class="all advanced_ecommerce table-secondary small" style=" height: 50%;">
          <td colspan="2" class="text-body">
            Header
          </td>
          <td>
        </td>
      </tr>
      <tr class="all advanced_ecommerce" style="">
          <td class="label_column">
          </td>
          <td class="data_column" width="auto">
              <input class="h1_header_competitor_1" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-size="small"
                       data-onstyle="success" data-offstyle="danger" name="h1_header_competitor_1">
        </td>
    </tr>
    <tr class="new_x_class" style="display: none;">
        <td class="label_column">
            Data show
        </td>
        <td class="data_column" width="auto">
            <input type="checkbox" class='h1_no_header_competitor_1' data-toggle="toggle" data-on="No" data-off="Yes" data-size="small"
                       data-onstyle="success" data-offstyle="danger" name="h1_no_header_competitor_1" checked="checked">
        </td>
    </tr>
    <tr class="h1_no_header_competitor_1_list" style="display: none;">
        <td class="label_column">
            Data
        </td>
        <td width="auto">
            <textarea class="form-control" rows="3" name="h1_no_header_competitor_1_list" style="max-width: 75%"></textarea>
        </td>
    </tr>
</tbody>

    <script>
            $(document).ready(function(){
         $('.h1_header_competitor_1').change(function(){
                console.log($(this).prop("checked"));
          jQuery('.new_x_class').toggle('slow');
         });
            $('.h1_no_header_competitor_1').on('change',function(){
                 console.log($(this).prop("checked"));
             jQuery('.h1_no_header_competitor_1_list').toggle('slow');
            });
        });
     </script>

   </html>