如何用拨动开关改变按钮

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>