Js код изменяет размер только одного элемент сайта

Sultan
На сайте с 20.10.2020
Offline
63
213

Всем Здравствуйте! Долго думал как объяснить свою мысль, попытаюсь объяснить помогите пожалуйста.

Есть js код который изменит размер элемент сайта, но при срабатывания js код , изменить только один элемент, остальный остаётся так как есть, таких элемент в страница 10 штук, как сделать так чтоб js код срабатывал для всей (10 штук) определенный элемент сайта?

<script type="text/javascript">
let wrapper = document.getElementById('idelementsayta')
const observer = new MutationObserver(function (mutations, observer) {
  wrapper.style.height = '500px'
  wrapper.style.minHeight = '500px'
})
observer.observe(wrapper, {
  attributes: true,
  attributeFilter: ['style']
})
</script>

Заранее спасибо!

Aisamiery
На сайте с 12.04.2015
Offline
293
#1
Sultan :
Есть js код который изменит размер элемент сайта, но при срабатывания js код , изменить только один элемент, остальный остаётся так как есть, таких элемент в страница 10 штук, как сделать так чтоб js код срабатывал для всей (10 штук) определенный элемент сайта?

Я только намекну, функция 

document.getElementById('idelementsayta')

получает элемент по его ID, а по правилам html ID это уникальное значение на странице и может быть только одно. Вам надо использовать классы и функцию querySelectorAll

Document: querySelectorAll() method - Web APIs | MDN
Document: querySelectorAll() method - Web APIs | MDN
  • 2023.07.22
  • developer.mozilla.org
A string containing one or more selectors to match against. This string must be a valid CSS selector string; if it's not, a exception is thrown. See Locating DOM elements using selectors for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas. Note: Characters which...
Разработка проектов на Symfony, Laravel, 1C-Bitrix, UMI.CMS, OctoberCMS
Sultan
На сайте с 20.10.2020
Offline
63
#2

Пробовал так,

<script type="text/javascript">
let wrapper = document.querySelectorAll('classelementsayta')
const observer = new MutationObserver(function (mutations, observer) {
  wrapper.style.height = '500px'
  wrapper.style.minHeight = '500px'
})
observer.observe(wrapper, {
  attributes: true,
  attributeFilter: ['style']
})
</script>

Ваш намек как то не поможет ) В любом случае Спасибо.

D
На сайте с 02.02.2010
Online
132
#3
Нужен цикл, пройтись по всем элементам. 
LEOnidUKG
На сайте с 25.11.2006
Offline
1723
#4
document.querySelectorAll('classelementsayta')

Это массив данных, нужно все элементы перебрать и изменить у каждого элемента. Чудесным образом у всех не меняется.

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/
W1
На сайте с 22.01.2021
Offline
285
#5
Sultan #:
Ваш намек как то не поможет

Это он не поможет тем, кто ничего не понимает в написанном.   Aisamiery чётко написал:

Aisamiery #:
ID это уникальное значение на странице и может быть только одно

А у Вас написано:

Sultan :
таких элемент в страница 10 штук

То есть для десяти элементов одинаковым может быть только class, но никак не id.

Мой форум - https://webinfo.guru –Там я всегда на связи
ArbNet
На сайте с 27.10.2019
Offline
124
#6
Sultan :

Всем Здравствуйте! Долго думал как объяснить свою мысль, попытаюсь объяснить помогите пожалуйста.

Есть js код который изменит размер элемент сайта, но при срабатывания js код , изменить только один элемент, остальный остаётся так как есть, таких элемент в страница 10 штук, как сделать так чтоб js код срабатывал для всей (10 штук) определенный элемент сайта?

Заранее спасибо!

Во-первых тут наблюдение за элементом вообще не нужно. Во-вторых вам правильно советуют, нужно применять функцию к каждому элементу.

Это делается намного проще:

К тем элементам которые хотите изменить добавьте признак, атрибут data- для выборки

<div data-i="elementsayta"></div>

Затем выбираете эти элементы и применяете к ним функцию:

<script>
let els=document.querySelectorAll('[data-i="elementsayta"]');
els.forEach(function(elt){
  elt.style.height='500px'
  elt.style.minHeight='500px'
})
</script>
Обсуждение разработки на моём фреймворке https://discord.gg/23N4s9x2kp
Aisamiery
На сайте с 12.04.2015
Offline
293
#7
Sultan #:

Ваш намек как то не поможет ) В любом случае Спасибо.

Ну вот прям если брать ваш текущий код, то его надо обернуть в map() просто и селектор класса выбирается через точку

<script type="text/javascript">
document.querySelectorAll('.classelementsayta').map((wrapper) => {
  const observer = new MutationObserver(function (mutations, observer) {
    wrapper.style.height = '500px'
    wrapper.style.minHeight = '500px'
  })
  observer.observe(wrapper, {
    attributes: true,
    attributeFilter: ['style']
  })
})
</script>

Но если что я не тестил, но должно работать ))

Sultan
На сайте с 20.10.2020
Offline
63
#8
Эх Всем спасибо, тема закрыта, отказываю реализовать данный штука, никак не работает.
W1
На сайте с 22.01.2021
Offline
285
#9
Sultan #:
никак не работает

JavaScript - штука тонкая. Наймите специалиста.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий