jQuery: скрыть / показать элемент при переключении переключателя и переключиться - PullRequest
Новая
       44

jQuery: скрыть / показать элемент при переключении переключателя и переключиться

2 голосов
/ 10 февраля 2012

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

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

Я полностью признаю, что мои знания 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. Кто-нибудь, кто мог бы помочь мне в последней части?

1 Ответ

0 голосов
/ 10 февраля 2012

Имейте это в качестве функции "зависания": 

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

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

...