обмен изображения при нажатии селектора с помощью jquery

Question

У меня есть часто задаваемые вопросы и я хотел бы прикрепить изображение справа от вопроса, которое говорит человеку закрыться, если открыто, и открыть, если закрыто.

Вот что у меня есть:

$('.header-person').click(function() {
    $(this).next('.entry').slideToggle("fast")
    return false;
});

У меня есть два изображения рядом с вопросом, вот так:

question 1  

<span class="icon"><img src="open.png" width="16" height="16" border="0" /></span>


<span style="display:none;" id="icon-delete"><img src="close-32.png" width="16" height="16" border="0" /></span>

Спасибо!

Answer 1

Нет необходимости переносить изображения в промежутки. Вы можете просто поместить класс для каждого изображения прямо на него и переключать его таким образом. Кроме того, вы можете не обращать внимания на функциональность .next(), поскольку она может работать не так, как вы ожидаете. Это только захватывает немедленного следующего родного брата. Это означает, что если между элементом, по которому вы его вызываете, и элементом, который вы ищете, есть какие-либо братья и сестры, вы не найдете его.

Ознакомьтесь с документацией для .next(): http://api.jquery.com/next/

Вместо этого попробуйте использовать .nextAll() с селектором фильтра, чтобы найти нужный элемент.

Документация для .nextAll(): http://api.jquery.com/nextAll/

Как говорится, вот демонстрация, которая делает то, что вы хотите (я думаю): http://jsfiddle.net/Ender/9eXnW/1/

По сути, вы просто должны убедиться, что у вас есть видимость каждого из изображений, правильно настроенных для начала, затем просто выберите их оба и вызовите .toggle() для них в вашем событии клика.

Проверьте код:

$(function() {
    $('.entry').hide();
    $('.header-person').click(function(e) {
        e.preventDefault();
        $(this).nextAll('.entry:first').slideToggle("fast");
        $(this).children('.close-icon, .open-icon').toggle();
    });
});

Кроме того, я изменил ваш return false; на e.preventDefault()

Answer 2

Пожалуйста, введите полный код, чтобы мы могли видеть, какие селекторы мы можем использовать.

Но, по сути, похоже, все, что вам нужно сделать, это:

$(selectorforopen).toggle();
$(selectorforclosed).toggle();

Это в основном показывает, скрыто ли оно, и скрывает, если оно не отображается.