jQuery: hide/show element on radio box change checked & hover

Question

Я пробовал в течение нескольких часов, чтобы получить решение для следующей проблемы. Я сделал это с довольно сложным

• Список с выбором радио-коробок с описанием выбранной радиобазы под ним;
• При наведении курсора мыши на каждый элемент появляется описание в том же положении (все остальные описания исчезают);
• Когда мышь не наводится на элемент, появится описание, соответствующее проверенному радиооболочке (все остальные описания исчезают);

Я полностью признаю, что мои знания jQuery находятся на минимальном уровне, главным образом потому, что я никогда не должен использовать его сам. Проведя несколько часов в Google, и некоторые озадачивающие меня заставили меня все, кроме рабочего решения для всей проблемы. У меня был рабочий сценарий 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 
     } 
);}); 

на Jsfiddlle: 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'); 
} 

Ваш селектор для проверяемого ярлыке был выключен, что было на самом деле корнем.