jQuery show/hide rule

Question

В основном я пытаюсь показать скрытые div и ссылки, но с некоторыми проблемами. Функциональность требуется выглядит следующим образом:

• На странице загрузки, Div ID «дополнительные-языки» скрыта
• Пользователь может нажать на ссылку «Selected Дополнительные Языки», который будет показывать DIV «Необходимые дополнительные-Языки»
• в момент нажатия на эту ссылку, ссылка будет получить скрытые
• Пользователь может выбрать, чтобы скрыть DIV «дополнительные-Языки», нажав на «скрыть»
• в момент нажатия на эту ссылку, ссылка «Выбранные дополнительные языки» снова появится

Вот что я сделал до сих пор:

пометок:

<div class="row"> 
    <label for="native_language">Select</label> 
    <select name="native_language" id="native_language"> 
     <option value="">Any</option> 
     <option value="1">English</option> 
    </select> 

    <a class="show-additional-link" href="#">Select Additional Languages</a> 
</div> 

<div id="additional-languages" style="display: none;"> 
    <a class="hide-additional-link" href="#">[hide]</a> 

    <div class="row"> 
     <!-- additional language checkboxes --> 
    </div> 
</div> 

JS:

$('.show-additional-link').click(function(){ 
    $(this).parent().next().slideDown(); 
    $(this).hide(); 
    return false; 
}); 

Первая часть работает для меня, но я изо всех сил на получение второй части для работы, т. е. функциональность для «hide-дополнительная-link». Я пробовал:

$('.hide-additional-link').click(function(){ 
    $(this).parent().slideUp(); 
    $(this).parent().prev('.show-additional-link').show(); 
    return false; 
}); 

DIV скрыт, но показ 'show-extra-link' не отображается.

Answer 1

Изменить это:

$(this).prev('.show-additional-link').show(); 

к этому:

$(this).parent().prev("div.row").find('.show-additional-link').show(); 

.prev будет предназначаться, строго говоря, непосредственно предшествующего родственный. Ваша кнопка .show-additional-link является дочерним элементом предыдущего div, поэтому в основном вам нужно подняться на один уровень, получить предыдущий div и найти потомка .show-additional-link.

Answer 2

$('.hide-additional-link').click(function(){ 
    $(this).parent().slideUp(); 
    $(this).parents('#additional-languages').prev('.row').find('.show-additional-link').show(); 
    return false; 
}); 

Answer 3

Вы должны использовать

$(this).parent().prev().find('.show-additional-link').show(); 

Поскольку .show-additional-link является внутри предыд элемента.

Удачи вам!

Answer 4

Причина ответа karim79: функция скрытой дополнительной ссылки просматривает в # дополнительном языке контекст для предыдущего элемента сиблинга с помощью класса 'show-дополнительная-link'. Это нужно искать в .row.

Answer 5

Если бы это был я, я бы просто пошел с $(".show-additional-link") для удобочитаемости и расширяемости. Вы хотите, чтобы разработчики пользовательского интерфейса легко перемещали фрагменты HTML вокруг страницы без необходимости касаться кода JavaScript.

Если есть несколько .show-additional-link s на странице, начинают давать им идентификаторы