Заменить текст в div при нажатии на изображение

Question

Я пытаюсь заменить определенный текст внутри div "info" при нажатии на изображение (которое служит ссылкой). Я просто не уверен, какие методы могли бы сделать это. Я бы предпочел, чтобы это было jquery.

Мой код выглядит так:

<div class="info">
<p>I would like this text replaced</p>
<script>
</script>
</div><!--end info-->


<li><a href="1.jpg"><img src="1-s.png" width="55" height="55" alt="" class="latest_img" /></a><p>Replace the div "info" text with the text here when clicked on</p></li>

Answer 1

Я думаю, это то, что вы ищете:

$(function() {
  $("li a").click(function() {
    $("div.info p").text($(this).next().text());
    return false;
  });
});

Это позволяет немного больше гибкости при щелчке, также обратите внимание, что вам нужно обернуть обработчик щелчка в функцию document.ready, как я описал выше ... таким образом, он ожидает, пока DOM не будет готов к привязке, как только элементы он должен привязаться к тому, чтобы быть готовым.

Answer 2

Примерно так должно сработать:

$(function() {
  $("a:has(img.latest_img)").click(function() {
    $("div.info p").text($(this).next().text());
    return false;
  });
});

Позвольте мне объяснить, как это работает.

К сожалению, у якоря нет класса или идентификатора, но вы все равно можете найти его с помощью a:has(img.latest_img), то есть все якоря, которые имеют изображение-потомок с классом «latest_img».

Можно найти соответствующий абзац и заменить его текст на $("div.info p").text().

Текст для его замены.с может быть найдено любым количеством способов.Я просто выбрал $(this).next(), чтобы получить ссылку на него.Вы можете так же легко сделать $(this).closest("li").children("p") или любое количество других селекторов. Примечание: this в обработчике события ссылается на источник события.

Наконец, обработчик щелчка возвращает false, чтобы остановить распространение события.В противном случае якорь будет перемещать браузер к 1.jpg (это атрибут href).