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

Question

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

Это то, что у меня есть:

$('.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(); 

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