Как использовать функцию attr для получения изображения

Question

Когда пользователь щелкает изображение «Отпуск» слева, справа от изображений на изображении появится его большая копия с id «currenttimage» внутри div «bigimage». (См. Файл HTML)

В то же время под «текущим изображением» должно отображаться одно из следующих значений: «Каникулы в горах», «Каникулы в океане» или «Каникулы в пустыне» в зависимости от того, какое изображение было выбрано.

это часть кода HTML

<div id="bigimage">
<img id="currentimage" src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
<p id="imagedesc"></p>
</div>

Это часть кода JS

$("img").click(function () 
{
var mySrc = $(this).attr("src");

$("#currentimage").attr("src", mySrc);

$("#imagedesc").html(this.alt); 
});

Я также пытался

$("img").click(function () 
{
$("#currentimage").attr("src", this.src);

$("#imagedesc").html(this.alt); 
});

, но когда я щелкаю изображение, его большая копия не появляется справа

Answer 1

Ваш обработчик кликов находится на любом img, это означает, что элемент #currentimage является единственным элементом, который добавлен в этот обработчик. Затем вы устанавливаете src на src, который уже есть.

вместо этого вы хотите изменить src на что-то другое. Здесь я установил начальный меньший заполнитель, который при клике заменяется на больший.

$("img").click(function() {
  this.src = 'https://placeimg.com/500/500';
  $("#imagedesc").html(this.alt);
});

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<img id="currentimage" src="https://placeimg.com/200/200" alt="ocean vacation" />
<p id="imagedesc"></p>

Answer 2

Браузеры не перезагружают изображение после смены src. Попробуйте удалить старый элемент со старым изображением и вставить новый элемент с новым изображением src.

Или: Как перезагрузить / обновить элемент (изображение) в jQuery