Как добавить разные линки на дивы с одним классом?
Есть условно такие дивы в консоли (не статичный html):
<div data-v-a07d9ad7="" class="spots"><div> <div data-v-a07d9ad7="" class="spots"><div> <div data-v-a07d9ad7="" class="spots"><div> |
<div data-v-a07d9ad7="" class="spots"><div> <div data-v-a07d9ad7="" class="spots"><div> <div data-v-a07d9ad7="" class="spots"><div>
Каждому из них мне нужно дать разную ссылку, можно ли это сделать через appendChild или как-то так.
Была мысль накинуть id-шки сначала а на них посадить линки, через примерно такой код:
function addIds() { var divs = document.querySelectorAll('.spot'); divs.forEach(function (div, index) { var uniqueId = 'spot' + (index + 1); div.id = uniqueId; }); } addIds(); |
function addIds() { var divs = document.querySelectorAll('.spot'); divs.forEach(function (div, index) { var uniqueId = 'spot' + (index + 1); div.id = uniqueId; }); } addIds();
Однако id оно не добавило, потому что у меня html не статичный и формируется через _nuxt с json, соответственно эта конструкция дивов загружается только на определенном этапе скролла, по количеству json-ов.
Как можно реализовать это всё?
Дополнительно:
Вешай обработчик после:
только на определенном этапе скрола
Я уже в сам nuxt докинул все таки id с инкрементом и теперь эти дивы как бы имеют разные id-шки, но линк все равно не вешает, потому что опять же если вниз js кидаю, то он не понимает, на что эти линки вешать, потому что они идут вгрузкой второго порядка, а в сам nuxt тоже не могу вписать, потому что не фулл мой проект и тогда он пишит что целостность рушится.
Html ки компилирует в canvas
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления разных ссылок на дивы с одним классом, вам следует использовать атрибут data-* в HTML и JavaScript. Этот подход позволяет динамически добавлять уникальные данные к элементам с одним классом.
Приведу пример использования этого подхода:
HTML:
```html
```
JavaScript:
```javascript
document.querySelectorAll('.myDiv').forEach(div => {
div.addEventListener('click', function() {
const link = this.getAttribute('data-link');
window.open(link, '_blank');
});
});
```
В этом примере мы создаем три дива с классом "myDiv" и атрибутом data-link, который содержит уникальные ссылки для каждого дива. Затем мы используем JavaScript для добавления обработчика события click к каждому диву. При клике на див, мы получаем значение атрибута data-link и открываем ссылку в новой вкладке.
Таким образом, вы можете добавлять разные ссылки на дивы с одним классом, используя атрибут data-* и JavaScript. Надеюсь, это поможет вам решить вашу проблему!