为什么我的开关按钮不起作用

Question

I have switch button. when it's clicked one table should be visible, another one is hidden. but t doesn't work properly =(

here is fiddle https://jsfiddle.net/wgcwwht7/

 $(document).ready(function(){ var switchBtn2 = document.getElementById('switch-flight2'); $(switchBtn2).click(function(){ $(this).toggleClass('checked'); $('#deptbl2').toggleClass('hidden'); $('#arrtbl2').toggleClass('visible'); }); }); 

 .hidden{ display: none; } .visible{ display: block; } .table-scroll > tbody > tr > td, .table > tfoot > tr > td{ border-top: 0; } .table > tbody + tbody{ border-top: 0; } .table tbody tr td, .table thead tr td{ text-align: center; padding: 4px; } /*THEAD*/ .table-scroll thead tr td{ font-size: 18px; padding-bottom: 10px; padding-top: 10px; vertical-align: middle; /*text-shadow: 1px 1px 1px #FFFFFF;*/ } .table-scroll > thead > tr > td span{ line-height: 1; display: block; } table.table-scroll { display: table; width: 100%; margin: 0; } table.table-scroll thead, table.table-scroll tbody { float: left; width: 100%; } table.table-scroll tbody { overflow: auto; height: 298px; } table.table-scroll thead tr { width: 100%; display: table; text-align: left; } table.table-scroll tbody tr td { vertical-align: middle; } .table-scroll tbody tr:first-child{ margin: 5px 0; } .table-scroll tbody tr:first-child td, .table-scroll tbody tr:first-child td:nth-child(2){ font-weight: bold; text-transform: uppercase; } .table-scroll tbody tr td:nth-child(2){ text-transform: capitalize; } .table-scroll tbody tr td:nth-child(1){ text-transform: uppercase; } .table-scroll > tfoot > tr > td{ padding: 10px 8px; } .table-scroll tfoot td{ text-align: left; } .table-scroll tfoot td a{ color: #ffffff; font-size: 18px; text-transform: uppercase; } /*switch button*/ .switch-box{ border-bottom: 1px solid #000000; text-align: center; display: table-cell; width: 400px; } .switch-box span{ width: 40%; height: 45px; color: #ffffff; vertical-align: middle; font-size: 16px; line-height: 45px; text-shadow: 0px 0px 5px #333333; } .switch-box span.landing{ text-align: right; background: url('img/plane_land.png') 53px -4px no-repeat; -webkit-background-size: 50px 50px; background-size: 50px 50px; } .switch-box span.arriving{ text-align: left; background: url('img/plane_arr.png') 58px -4px no-repeat; -webkit-background-size: 50px 50px; background-size: 50px 50px; } .switch { width: 20%; height: 21px; margin: 12px 0; position: relative; display: inline-block; vertical-align: middle; } .switch input { top: 0; right: 0; bottom: 0; left: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; z-index: 100; position: absolute; width: 100%; height: 100%; cursor: pointer; } .switch label { display: block; width: 100%; height: 100%; position: relative; background: #00498B; border-radius: 40px; box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5); } .switch label:after { content: ""; position: absolute; z-index: -1; top: -8px; right: -8px; bottom: -8px; left: -8px; border-radius: inherit; } .switch label i { display: block; height: 100%; width: 60%; position: absolute; left: 0; top: 0; z-index: 2; border-radius: inherit; background: #b2ac9e; /* Fallback */ background: linear-gradient(#f7f2f6, #b2ac9e); box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0,0,0,0.3), 0 5px 5px rgba(0,0,0,0.2); } .switch label i:before { content: ""; position: absolute; top: 50%; right: -50%; margin-top: -12px; color: #666; /* Fallback */ color: rgba(0,0,0,0.4); font-style: normal; font-weight: bold; font-family: Helvetica, Arial, sans-serif; font-size: 24px; text-transform: uppercase; text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e; } .switch input:checked ~ label { /* Background */ background: #00498B; } .switch input:checked ~ label i { /* Toggle */ left: auto; right: -1%; } .switch input:checked ~ label i:before { /* On/off */ content: ""; right: 115%; color: #82a06a; text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659; } 

 <div class="switch-box"> <span class="col-lg-5 col-md-5 landing">Прибытие</span> <div class="switch col-lg-2 col-md-2 no-padding"> <input id="switch-flight2" type="checkbox"> <label><i></i></label> </div> <span class="col-lg-5 col-md-5 arriving">Вылет</span> </div> <div class="col-lg-12 col-md-12 no-padding" id="deptbl2"> <table class="table table-scroll"> <tbody class="tb-row scroll-pane"> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr><tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr><tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr><tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> </tbody> </table> </div> <div id="arrtbl2" class="col-lg-12 col-md-12 no-padding hidden"> <table class="table table-scroll"> <tbody class="tb-row scroll-pane"> <tr> <td>7789</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr><tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr><tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr><tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> <tr> <td>1234</td> <td>13245</td> <td>1235</td> <td>1235</td> <td>1235213</td> <td>1235</td> <td>1325</td> </tr> </tbody> </table> </div> 

I have no idea why it doesn't work

Answer 1

Change $ to jQuery and define it on top like, var $ = jQuery; if it doesn't work, call jQuery library from a cdn dir

Answer 2

You didn't specify jQuery as library in your fiddle.

Also, the jQuery plugin jScrollPane is missing. it works when I removed it.

//removed code
$(function()
{
    $('.scroll-pane').jScrollPane( //jScrollPane is not found.
        {
            horizontalGutter: 30,
            verticalGutter: 30
        }
    );
});

https://jsfiddle.net/wgcwwht7/3/