jQuery：隐藏/显示单选框上的元素更改选中和徘徊

Question

我已经尝试了几个小时来解决以下问题。我用一个相当复杂的 A 列表来完成此操作

• ，其中包含一个单选框选择，下面是所选单选框的描述；
• 将鼠标悬停在每个项目上时，会出现同一位置的描述（所有其他描述都会消失）；
• 当鼠标未悬停在某个项目上时，将出现与选中的单选框匹配的描述（所有其他描述消失）；

我完全承认我的 jQuery 知识还处于最低水平，主要是因为我自己从来不需要使用它。在谷歌上花了几个小时，并解决了一些令人费解的问题，我得到了一切，但没有找到整个问题的可行解决方案。不久前我有一个可用的 JS 脚本，代码太多了，看看我现在的情况，看起来 Jquery 可以给我一个更短、更干净的代码。

现在我

<style type="text/css">
   .options .active {font-weight: bold;}
   .descriptions span {display: none;}
   .descriptions span.active {display: block;}​
</style>

<div class="options">
   <label><input name="permForumcon" type="radio" value="10" /> option1</label>
   <label><input name="permForumcon" type="radio" value="50" />option2</label>
   <label><input name="permForumcon" type="radio" value="70" /> option3</label>
</div>

<div class="descriptions">
   <span>description1</span>
   <span>description2</span>
   <span>description3</span>
</div>


$(document).ready(function() {
options = $('.options > label');
descriptions = $('.descriptions > span');
options .each(function(idx) {$(this).data('slide', descriptions.eq(idx));}).hover(
    function() {
        options .removeClass('active');
        descriptions.removeClass('active');             
        $(this).addClass('active');  
        $(this).data('slide').addClass('active');
     }, function() {
        switches.removeClass('active');
        slides.removeClass('active');
         $('input[name=permForumcon]:checked + label').addClass('active') //this is where is already doesnt seem to work
        }
 );});

在 Jsfiddle.net 上得到以下 HTML： http://jsfiddle.net/mqcP9/8/

剩下的问题是，它（选项中的标签和描述中的范围上添加的活动类）不会更改回所选的单选框。我尝试了一些在查看 jsfiddle 沙箱时可见的注释。谁能帮我完成最后一部分？

Answer 1

将此作为您的“关闭悬停”功能：

function() {
    options.removeClass('active');
    descriptions.removeClass('active');
    $('label:has(input:checked)').addClass('active');
    $('label:has(input:checked)').data('slide').addClass('active');
}

您选中的标签的选择器已关闭，这实际上是它的根源。