1

HTML:

<a id="img-1" href="https://static.example1.com/images/img1.png">
 <img class="img-thumbnail" src="https://proxy.example2.com/.../img1.png">
</a>
<a id="img-2" href="https://static.example1.com/images/img2.png">
 <img class="img-thumbnail"  src="https://proxy.example2.com/.../img2.png"
</a>

Как получить src у изображения, но при этом заменив обе href ссылки на соответствующие src ссылки?(и замена ссылок должна происходить со стороны клиента и если будет jQuery то ничего страшного)

Пробовал:

var imgsrc = document.getElementsByClassName("img-thumbnail").src;
document.getElementById("img-1").src=imgsrc;

Но это полностью бесполезно, хотя на что было надеяться. Если честно, но хз как это реализовать.

3
  • Не getElementByClassName, а getElementsByClassName. И возвращает он массив.
    – XelaNimed
    13 дек 2021 в 9:45
  • @XelaNimed что за чушь? Он возвращает HTMLCollection, в этом можно легко убедиться: document.getElementsByClassName('img-thumbnail') instanceof HTMLCollection. Плюс к тому он не имеет как минимум метода forEach.
    – ΝNL993
    11 фев 2023 в 13:19
  • Извиняюсь, был не прав с массивом, но в любом случае нет такого метода у документа как getElementByClassName. Массив, коллекция... Главный посыл был в возвращении множества, а не единичного элемента.
    – XelaNimed
    12 фев 2023 в 14:09

2 ответа 2

4
let imgs = document.querySelectorAll('.img-thumbnail');
imgs.forEach(el => el.closest('a').href = el.src);
0
3

На jq вот так вот можно. Заходим в каждую картинку, берем ее src, и ее родителю меняем href.

$('.img-thumbnail').each(function() {
  let src = $(this).attr('src');
  
  $(this).parents('a').attr('href', src);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="img-1" href="https://static.example1.com/images/img1.png">
 <img class="img-thumbnail" src="https://proxy.example2.com/.../img1.png">
</a>
<a id="img-2" href="https://static.example1.com/images/img2.png">
 <img class="img-thumbnail" src="https://proxy.example2.com/.../img2.png">
</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.