jQuery:隐藏/显示单选框上的元素更改选中和悬停

Question

我已经尝试了几个小时来找到以下问题的解决方案。我用相当复杂的方式做到了

• 包含单选框选项的列表，其下方带有所选单选框的说明；
• 将鼠标悬停在每个项目上时，会出现同一位置的说明(所有其他说明都会消失)；
• 当鼠标未悬停在某个项目上时，将出现与选中的单选框匹配的描述(所有其他描述消失)；

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

现在我得到了以下 HTML:

<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 上: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');
}

您选中的标签的选择器已关闭，这确实是问题的根源。