Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.12.2021, 14:09
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Как с дочерних элементов добавить активный класс родителю?
Добрый день всем.
Как добавить активный класс родителю parent, когда клик происходит по дочернему butt?

<div class="parent">
        <button class="butt">Активный класс нужен родителю parent</button>
    </div>


p.s. Без jQuery пожалуйсто
Ответить с цитированием
  #2 (permalink)  
Старый 11.12.2021, 14:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Alexander3928
Как добавить активный класс родителю parent, когда клик происходит по дочернему butt?
У каждого дочернего элемента есть ссылка на родителя
<элемент>.parentNode

https://developer.mozilla.org/ru/doc...ode/parentNode
Ответить с цитированием
  #3 (permalink)  
Старый 11.12.2021, 14:23
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

ksa,
Но мне же все равно прийдёт сперва вытаскивать parent с document.querySelector("")? Если над этим дивом есть другие элементы кроме bodyЯ правильно понимаю?

const butt = document.querySelector(".butt")
butt.parentNode().classList.add("active")


В конце мои догадки, они верны?
Ответить с цитированием
  #4 (permalink)  
Старый 11.12.2021, 14:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Alexander3928,
parent click if targer .butt parent classList.add
Ответить с цитированием
  #5 (permalink)  
Старый 11.12.2021, 16:11
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

рони,
У меня ситуация просто, родительский элемент по размеру дочернего. То-есть когда я навожусь я вижу дочерний элемент, а не родительский. Просто пример который я отправил в первом сообщении просто пример. А не именно моя проблема. В моей ситуации дочерний элемент по размеру родительского, поэтому я не смогу отслеживать клики по родительскому элементу. Надеюсь понятно объяснил в чем, это метод не совсем подойдёт
Ответить с цитированием
  #6 (permalink)  
Старый 11.12.2021, 16:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от Alexander3928
В моей ситуации дочерний элемент по размеру родительского, поэтому я не смогу отслеживать клики по родительскому элементу.
какие ваши доказательства?
Ответить с цитированием
  #7 (permalink)  
Старый 11.12.2021, 16:57
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

рони,
Какие доказательства? Я могу скинуть пример который у меня, но там код слегка большой.
+ У меня в другом который не использовал в качестве примера, есть элемент works_hover у него в стилях position: absolute, поэтому когда я навожусь, я вижу не родительский элемент, а works_hover.

Вот мой пример:

<a href="#" class="parent">
           <div class="works__hover"></div>
            <img src="image" class="works__img">
      </a>


У works__hover стили такие

position: absolute
top: 0
witch: 100%
height: 100%
Ответить с цитированием
  #8 (permalink)  
Старый 11.12.2021, 17:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от Alexander3928
я вижу не родительский элемент,
как это может влиять на всплытие клика до родителя?
Ответить с цитированием
  #9 (permalink)  
Старый 11.12.2021, 17:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Alexander3928,
делайте макет, минимальный и описание куда жать, что сделать.
Ответить с цитированием
  #10 (permalink)  
Старый 11.12.2021, 18:07
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Alexander3928
У меня ситуация просто, родительский элемент по размеру дочернего. То-есть когда я навожусь я вижу дочерний элемент, а не родительский.
Никакой разницы не вижу...
<style type='text/css'>
.parent,
.test {
	display: inline-block;
}
.on {
	border: 2px solid red;
}
</style>
<div class="parent">
	<button class="butt">Активный класс нужен родителю parent</button>
</div>
<div class="test">
	<button>Тест</button>
</div>
<script>
document.querySelectorAll('.butt, .test').forEach(_ => {
	_.addEventListener('click', _ => {
		const o = _.target
		if (o.classList.contains('test')) {
			if (!o.classList.contains('on')) o.classList.add('on')
			return
		}
		if (!o.parentNode.classList.contains('on')) o.parentNode.classList.add('on')
		})
})
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить класс к таблице но не ко всем td Alexprom Элементы интерфейса 12 05.02.2021 15:35
Как добавить условие? LADYX Элементы интерфейса 12 19.03.2020 18:00
Как удалить класс у соседних элементов housewm Events/DOM/Window 4 11.03.2014 13:29
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как при появление класса в блоке1, добавить класс в блок2? raindew jQuery 3 11.10.2013 21:05