Атрибуты массива
Как лучше всего передать IMG SRC в такой массив, как:
var images = ['img1.png', 'img2.png', img3.png'];
<div class = "cc">
<img class='content-image' src = "./img1.png" alt = "">
<img class='content-image' src = "./img2.png" alt = "">
<img class='content-image' src = "./img3.png" alt = "">
<img class='content-image' src = "./img4.png" alt = "">
<img class='content-image' src = "./img5.png" alt = "">
</div>
Пробовали это:
var images = []; const interactImg2 = document.querySelector('.cc'); [...interactImg2.querySelectorAll('img[src]')].forEach(img => images.push(new Image('img[src]')));
Невозможно получить SRC, но элемент отображается как (Image1, Image2, Image3).
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
88
6
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 6
Ответ принят как подходящий
var images = [];
const interactImg2 = document.querySelector(".cc");
[...interactImg2.querySelectorAll("img[src]")].forEach((img) =>
images.push(img.getAttribute('src'))
);
Попробуйте этот код. Если у вас возникнут какие-либо проблемы в дальнейшем, свяжитесь со мной.
Не могли бы вы проверить и это? stackoverflow.com/questions/78461926/…
—
12.05.2024 18:14
var images = [];
const interactImg2 = document.querySelector('.cc');
[...interactImg2.querySelectorAll('img[src]')].forEach(img => images.push(img.getAttribute('src')));
Вы можете использовать составной селектор CSS и регулярное выражение для извлечения имен файлов изображений. Если вам нужны полные пути к изображениям, просто верните src без регулярных выражений.
const images = [...document.querySelectorAll(".cc img[src]")].map(({src}) => src.match(/[^/]+$/)?.[0]);
console.info(images)<div class = "cc">
<img class='content-image' src = "./img1.png" alt = "">
<img class='content-image' src = "./img2.png" alt = "">
<img class='content-image' src = "./img3.png" alt = "">
<img class='content-image' src = "./img4.png" alt = "">
<img class='content-image' src = "./img5.png" alt = "">
</div>Я почти уверен, что это тоже сработает, но в другом ответе отмечено как решение, так как мне нужно было знать, чего мне не хватает. Спасибо!
—
11.05.2024 14:46
Используйте querySelectorAll, чтобы выбрать все изображения, и либо цикл forEach, либо map, чтобы создать массив:
const Images = document.querySelectorAll('.cc img');
let array = [];
Images.forEach(image => {
array.push(image.src);
})
console.info(array);<div class = "cc">
<img class='content-image' src = "./img1.png" alt = "">
<img class='content-image' src = "./img2.png" alt = "">
<img class='content-image' src = "./img3.png" alt = "">
<img class='content-image' src = "./img4.png" alt = "">
<img class='content-image' src = "./img5.png" alt = "">
</div>Попробуйте, это 100% работает
var images = [];
const interactImg2 = document.querySelector('.cc').children;
let img;
for(let i = 0;i<interactImg2.length;i++){
img = interactImg2[i].getAttribute('src').substr(2);
images.push(img);
}
это не сработает, если один дочерний элемент не является изображением. вам также не нужно использовать getAttribute для выбора источника.
—
11.05.2024 14:33
Используйте приведенный ниже код, он также работает:
<html>
<body>
<div class = "cc">
<img class='content-image' src = "./img1.png" alt = "">
<img class='content-image' src = "./img2.png" alt = "">
<img class='content-image' src = "./img3.png" alt = "">
<img class='content-image' src = "./img4.png" alt = "">
<img class='content-image' src = "./img5.png" alt = "">
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
console.info('DOM fully loaded and parsed');
var images = [];
var imgElements = document.getElementsByClassName('content-image');
for (var i = 0; i < imgElements.length; i++) {
console.info('img' + i + ' :: ', imgElements[i]);
images.push(imgElements[i].src);
}
console.info('img :: ', images);
});
</script>
</body>
</html>Другие вопросы по теме
Как использовать переменную для итерации в шаблоне Django?
Продукты Django не добавляются в корзину сразу
Как центрировать 3 текста, чтобы они находились на одной строке, но в разных позициях
Горизонтальная карта Bootstrap с телом карты, заполняющим вертикальное пространство и имеющим условную кнопку «расширитель» (подробнее)
Мой проект Angular 17 не запускает скрипт
Как увеличить изображение, когда пользователь прокручивает страницу до определенного раздела?
Предотвратить срабатывание события фокуса при нажатии на элемент дерева?
Как посчитать глубину дочерних элементов массива — Vue.js
Как отобразить HTML-контент в next.js
Видео автоматически открывается в браузере Safari, iPhone
Похожие вопросы
Превышен максимальный стек вызовов для Math.random
Как расширить объект Zod другим объектом и выбрать определенные записи?
Vue v-модель обнаруживает изменение родительской ссылки
Покажите, как программно изменить диапазон и цвет датчика
Продукты Django не добавляются в корзину сразу
Могу ли я использовать JavaScript для удаления изображения, которое не содержит идентификатора?
Как центрировать 3 текста, чтобы они находились на одной строке, но в разных позициях
Невозможно передать данные вручную в createRangeChart в Ag-Grid
Невозможно получить доступ к файлу cookie в JavaScript, document.cookie пуст
ChartJS: сгруппированная гистограмма с накоплением отображается неправильно
let images = [...interactImg2.querySelectorAll('img[src]')].map(img => img.src);