如何用撥動開關改變按鈕

Question

我正在建立一個網站，但在撥動開關方面遇到了一點問題。
我想用撥動開關顯示不同的按鈕。
我已經構建了切換按鈕，但我認為切換內容的功能存在問題。
當我打開 2 級時，結果會發生變化，但是當我打開 1 級時，沒有任何變化。
請告訴，這段代碼的問題在哪里？

 $(document).ready(function(){ $('input:radio').change(function(){ if($('input[name="graduate"]:checked').is(":checked")){ $('.ug').hide(); $('.phd').show(); }else{ $('.ug').show(); $('.phd').hide(); } }); });

 .btn-price:before { content: "\f07a"; display: block; width: 20px; height: 20px; float: right; margin: 0 0 0 6px; font-family: 'Font Awesome 5 Pro'; } .btn-price { display: table; padding: 10px 30px; text-decoration: none; font-size: 1.1em; margin: 15px auto; border-radius: 50px; color: #f4f4f4 !important; transition: all 0.3s ease 0s; } .btn-color-1 { background-color: #5DADE2; } .switcher { display: inline-block; height: 40px; margin-top:17px; padding: 4px; background: #fff; border-radius: 2px; width: 210px; border-radius: 30px; border: solid 1px #ddd; position: relative; } .switcher__input { display: none; } .switcher__label { float: left; width: 50%; font-size: 12px; line-height: 30px; text-align: center; cursor: pointer; position: inherit; z-index: 10; transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); will-change: transform; font-weight: unset; } .switcher__toggle { position: absolute; float: left; height: 30px; width: 50%; font-size: 12px; line-height: 30px; cursor: pointer; background-color: #3366cc; border-radius: 30px; left: 5px; top: 4px; transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1); will-change: transform; } .switcher__input:checked + .switcher__label { color: #fff; } .switcher__input--yang:checked ~ .switcher__toggle { left: 100px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <div class="ug col-md-6"> <div> <div> <a href="#1" class="btn-price btn-color-1">BTN 1</a> </div> </div> </div> <div class="phd col-md-6" style="display: none" > <div> <div> <a href="#2" class="btn-price btn-color-1">BTN 2</a> </div> </div> </div> <div class="col-md-6"> <div class="switcher"> <input type="radio" name="graduate" value="yin" id="yin" class="switcher__input switcher__input--yin"> <label for="yin" class="switcher__label">Level 2</label> <input type="radio" name="graduate" value="yang" id="yang" class="switcher__input switcher__input--yang" checked=""> <label for="yang" class="switcher__label">Level 1</label> <span class="switcher__toggle"></span> </div> </div>

Answer 1

您正在使用名稱屬性檢查單選按鈕是否已選中，因此一旦您選擇任何單選按鈕，每次單擊時它都將保持為真，這就是為什么它總是在標簽中顯示 button2

這是更新的代碼

 $(document).ready(function(){ $('input:radio').change(function(){ if($('input[name="graduate"]:checked').val() == "yin"){ $('.ug').hide(); $('.phd').show(); }else{ $('.ug').show(); $('.phd').hide(); } }); });

 .btn-price:before { content: "\f07a"; display: block; width: 20px; height: 20px; float: right; margin: 0 0 0 6px; font-family: 'Font Awesome 5 Pro'; } .btn-price { display: table; padding: 10px 30px; text-decoration: none; font-size: 1.1em; margin: 15px auto; border-radius: 50px; color: #f4f4f4 !important; transition: all 0.3s ease 0s; } .btn-color-1 { background-color: #5DADE2; } .switcher { display: inline-block; height: 40px; margin-top:17px; padding: 4px; background: #fff; border-radius: 2px; width: 210px; border-radius: 30px; border: solid 1px #ddd; position: relative; } .switcher__input { display: none; } .switcher__label { float: left; width: 50%; font-size: 12px; line-height: 30px; text-align: center; cursor: pointer; position: inherit; z-index: 10; transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1); will-change: transform; font-weight: unset; } .switcher__toggle { position: absolute; float: left; height: 30px; width: 50%; font-size: 12px; line-height: 30px; cursor: pointer; background-color: #3366cc; border-radius: 30px; left: 5px; top: 4px; transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1); will-change: transform; } .switcher__input:checked + .switcher__label { color: #fff; } .switcher__input--yang:checked ~ .switcher__toggle { left: 100px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <div class="ug col-md-6"> <div> <div> <a href="#1" class="btn-price btn-color-1">BTN 1</a> </div> </div> </div> <div class="phd col-md-6" style="display: none" > <div> <div> <a href="#2" class="btn-price btn-color-1">BTN 2</a> </div> </div> </div> <div class="col-md-6"> <div class="switcher"> <input type="radio" name="graduate" value="yin" id="yin" class="switcher__input switcher__input--yin"> <label for="yin" class="switcher__label">Level 2</label> <input type="radio" name="graduate" value="yang" id="yang" class="switcher__input switcher__input--yang" checked=""> <label for="yang" class="switcher__label">Level 1</label> <span class="switcher__toggle"></span> </div> </div>