jQuery：通过无线电隐藏和显示新检查的AND默认元素

Question

我想通过单击一组真棒字体图标来控制一组#panel。我模仿了显示为here的演示，以为我的页面设置一个可以正常工作的jQuery函数。所有相关代码如下所示。

HTML：

<input hidden type="radio" id="button_a" value="posts" name="panels" checked/>
<input hidden type="radio" id="button_b" value="cntac" name="panels"/>
<input hidden type="radio" id="button_c" value="about" name="panels"/>
<input hidden type="radio" id="button_d" value="more1" name="panels"/>
<input hidden type="radio" id="button_e" value="more2" name="panels"/>
<input hidden type="radio" id="button_f" value="more3" name="panels"/>

<ul id="ctrl">
<label for="button_a" class="label_a" title="posts"><i class="fa fa-book-open"></i></label>
<label for="button_b" class="label_b" title="cntac"><i class="fa fa-envelope"></i></label>
<label for="button_c" class="label_c" title="about"><i class="fas fa-feather"></i></label>
<label for="button_d" class="label_d" title="more1"><i class="fa fa-user"></i></label>
<label for="button_e" class="label_e" title="more2"><i class="fa fa-location-arrow"></i></label>
<label for="button_f" class="label_f" title="more3"><i class="fa fa-heart"></i></label>
</ul>

<section>
<div id="panel_posts"><!--VARIABLE CONTENT--></div>
<div id="panel_cntac"><!--VARIABLE CONTENT--></div>
<div id="panel_about"><!--VARIABLE CONTENT--></div>
<div id="panel_more1"><!--VARIABLE CONTENT--></div>
<div id="panel_more2"><!--VARIABLE CONTENT--></div>
<div id="panel_more3"><!--VARIABLE CONTENT--></div>
</section>

CSS：

#ctrl i {color:black;}
[id^="panel_"]{display:none;}
#panel_posts{display:block;}

#button_a:checked ~ .label_a i,
#button_b:checked ~ .label_b i,
#button_c:checked ~ .label_c i,
#button_d:checked ~ .label_d i,
#button_e:checked ~ .label_e i, 
#button_f:checked ~ .label_f i{cursor: default;color:red;}

jQuery：

$('input[type="radio"]').click(function() {
    if(this.checked){
        var inputValue = $(this).attr("value");
        var targetBox = $("#panel_" + inputValue);
        $("section div").not(targetBox).hide();
        $(targetBox).show();
    }
});

为什么在单击其他FA图标后重新单击其FA图标时，＃panel_posts为什么不重新显示？另外，为什么在没有明确引用的情况下删除输入名称会破坏功能（所有新单击的FA图标都变为红色，没有重置为黑色），并且这是我网站上唯一的收音机设置？

谢谢！

Answer 1

您需要更新条件：

if($(this).checked) {
   // ...
}

在您的示例中，由于不满足条件，因此不会执行'if'块内的代码。

希望这会有所帮助。