Jquery Noobish Help: Img OnClick

Question

Я очень новичок в JQuery, и у меня возникают проблемы с пониманием, как это сделать:

У меня есть изображение класса "imgexpander" с атрибутом src, установленным в "img1.png". Когда на изображении щелкают, он должен посмотреть, скрыт или виден ли div с классом "expand" в данный момент.

• Если он скрыт (по умолчанию), он показывает его (я знаю, как использовать show ()) и изменяет атрибут src изображения на «img2.png».

OR

• Если div видим, он скрывает его и изменяет атрибут src изображения на «img1.png».

Я еще не знаком с доступными функциями в JQuery. Как это могло быть достигнуто? Можете ли вы дать мне пример кода, с которым я могу работать?

Заранее спасибо!

ОБНОВЛЕНИЕ : Я забыл добавить подробности: можно ли каким-то образом сделать щелчок на изображении класса "imgexpander" только для тех элементов Div, которые объединены в один большой элемент Div? Итак, иерархия будет выглядеть примерно так:

• большой див
  • изображение с помощью клика
  • div, на который нужно повлиять
• еще один большой div
  • изображение с помощью кнопки мыши
  • div, на который нужно повлиять

Желаемый результат заключается в том, чтобы каждое «изображение с щелчком мыши» влияло только на «div», на которые нужно влиять », внутри соответствующего« большого div ». Это возможно? Я не уверен, что текущий ответ подойдет, но спасибо!

Answer 1

Как насчет:

$("img.imgexpander").click
(
  function()
  {        
    var expandableDIVs = $(this)
                           .parents("div.bigdiv:first")
                           .find("div.expand");    
    expandableDIVs.toggle();
    this.src = expandableDIVs.is(":visible") ? "img2.png" : "img1.png";
  }
);

Этот код устанавливает обработчик события щелчка для всех элементов IMG класса imgexpander. Обработчик переключает видимость всех элементов DIV класса расширения. Атрибут src изображения обновляется путем проверки, видимы ли какие-либо элементы DIV, соответствующие «div.expand».

Обратите внимание, что я могу назначить JIV-упакованный набор DIV, соответствующих селектору div.expand, переменной JavaScript для дальнейшего использования.

Ключевое слово this в обработчике событий ссылается на текущий элемент DOM, соответствующий селектору «img.imgexpander». Помните, что этому выражению может соответствовать несколько элементов.

РЕДАКТИРОВАТЬ : Метод получения элементов div.expand был обновлен для отражения изменений в OP. Только элементы DIV, которые являются дочерними элементами родительского класса DIV, классифицированного как bigdiv, будут переключаться при нажатии на img.

Обратите внимание, что были приняты меры, чтобы игнорировать способ разметки элементов. Для нас важно, чтобы у элемента IMG был родительский DIV где-то в его родительской цепочке класса bigdiv, но этот элемент не должен быть непосредственным родителем. Это причина моего использования псевдоселектора :first.