Новости Joomla

Онлайн-трансляции Joomla-разработки Игоря Бердичевского

20 лет Joomla: Ринат Кажетов.В 2025 году Joomla исполнилось 20 лет

20 лет Joomla: Ринат Кажетов.В 2025 году Joomla исполнилось 20 лет

👩‍💻 20 лет Joomla: Ринат Кажетов.В 2025 году Joomla исполнилось 20 лет. Вокруг неё сложилось большое интернациональное русскоязычное сообщество. На сайте нашего сообщества и на Хабре к юбилею были собраны интервью с его видными представителями. Сегодня мы читаем интервью с Ринатом Кажетовым (@rkazhet). Ринат - один из администраторов чата русскоязычного Joomla-сообщества, из Казахстана. Это человек, который всегда знает или найдёт нужную ссылку, пристально следит за новостями в мире Joomla, многое узнаёт первым и просто очень отзывчивый человек. Интервью с Ринатом взял Евгений Сивоконь.Читать интервью@joomlafeed#joomla #community

20 лет Joomla: Ринат Кажетов

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 21 Ответов
  • 2932 Просмотров
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
[РЕШЕНО] Добавить класс при условии JS?
« : 24.02.2020, 12:06:26 »
Добрый день,
Подскажите пожалуйста, посоветуйте

Нужно добавить класс при условии, если id="header-container" содержит класс "dfd-header-dark":
<div id="header-container" class="dfd-header-dark">

то добавить класс "summary" к id="light-dark", что б получилось:
<div id="light-dark" class="summary">
  <ul class="social social-fixed">
   <li>Ссылка</a></li>
   <li>Ссылка</a></li>
   <li>Ссылка</a></li>
  </ul>
</div>

Не селен в JS, в инете куча написано - что то не так делаю.

Побывал:
Код
jQuery(init);
function init() {
	if (jQuery('#header-container').hasClass('dfd-header-dark')) {
	jQuery('#light-dark').addClass('summary');
	}
}
и так
Код
jQuery(document).init(function() {
						if($('div').hasClass('dfd-header-light')) {
							jQuery('#light-dark').removeClass('dfd-nav-light').addClass('dfd-nav-dark');
						} else {
							jQuery('#light-dark').removeClass('dfd-nav-dark').addClass('dfd-nav-light');
						}
}
Подскажите где допускаю ошибку, как правильно прописать ?
« Последнее редактирование: 26.02.2020, 13:03:51 от warlocksp »
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

draff

  • Гуру
  • 5801
  • 434 / 7
  • ищу работу
Re: Добавить класс при условии JS?
« Ответ #1 : 24.02.2020, 12:27:33 »
Код
function init() {
if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}
}
init();
Записан
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #2 : 24.02.2020, 13:04:14 »
Цитата: draff от 24.02.2020, 12:27:33
function init() {
if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}
}
init();

Не срабатывает, может еще варианты.
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

ProtectYourSite

  • Живу я здесь
  • 2368
  • 139 / 4
  • Безопасность вебсайтов
Re: Добавить класс при условии JS?
« Ответ #3 : 24.02.2020, 13:34:58 »
А все HTML элементы есть изначально в верстке или что-то подгружается динамически?
Записан
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #4 : 24.02.2020, 13:41:26 »
Цитата: ProtectYourSite от 24.02.2020, 13:34:58
А все HTML элементы есть изначально в верстке или что-то подгружается динамически?

Подгружаются динамически меняется:
<div id="header-container" class="dfd-header-dark">
на
<div id="header-container" class="dfd-header-light">

Динамически сминается только: "dfd-header-dark" и "dfd-header-light"

И что б при появление "dfd-header-dark", добавлялся класс к <div id="light-dark" class="summary">
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

draff

  • Гуру
  • 5801
  • 434 / 7
  • ищу работу
Re: Добавить класс при условии JS?
« Ответ #5 : 24.02.2020, 13:53:39 »
Цитата: warlocksp от 24.02.2020, 13:04:14
Не срабатывает, может еще варианты.
Вы код в обертку добавили и jQuery подключен ?
Записан
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #6 : 24.02.2020, 13:55:15 »
Цитата: draff от 24.02.2020, 13:53:39
Вы код в обертку добавили и jQuery подключен ?
Код
<script>
function init() {
if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}
}
init();
</script>

jQuery - подключен
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

draff

  • Гуру
  • 5801
  • 434 / 7
  • ищу работу
Re: Добавить класс при условии JS?
« Ответ #7 : 24.02.2020, 13:58:34 »
Код
<script>
jQuery(function () {
function init() {
if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}
}
init();
jQuery(document).ajaxStop( function() {
init();
});
});
</script>
Записан
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #8 : 24.02.2020, 14:16:19 »
Вот полная строка: #header-container.
<div id="header-container" class="header-style-7 header-layout-fullwidth sticky-header-enabled slide-up  without-top-panel logo-position-left without-top-panel dfd-header-layout-fixed text-left default dfd-enable-headroom dfd-smart-header dfd-header-dark">

При этом не работает,
Код
function init() {
if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}
}
init();
Ставлю
Код
if (jQuery('#header-container').hasClass('header-style-7'))
Добавляет класс: <div id="light-dark" class="summary">

То есть, не видит то что, динамически сминается: "dfd-header-dark" на "dfd-header-light"
« Последнее редактирование: 24.02.2020, 14:19:23 от warlocksp »
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

passer

  • Завсегдатай
  • 1013
  • 75 / 3
Re: Добавить класс при условии JS?
« Ответ #9 : 24.02.2020, 14:35:45 »
Ну засунь все это в ту функцию которая класс меняет.
Записан
*

draff

  • Гуру
  • 5801
  • 434 / 7
  • ищу работу
Re: Добавить класс при условии JS?
« Ответ #10 : 24.02.2020, 14:36:31 »
Код
jQuery(document).ajaxStop( function() {
//init();
if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}
});
Записан
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #11 : 24.02.2020, 14:57:12 »
Цитата: draff от 24.02.2020, 14:36:31
Код
jQuery(document).ajaxStop( function() {
//init();
if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}
});
не срабатывает.
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

robert

  • Живу я здесь
  • 4974
  • 457 / 20
Re: Добавить класс при условии JS?
« Ответ #12 : 24.02.2020, 15:56:36 »
Код: JavaScript
<script>
	const 
		mo = new MutationObserver(els => {
					els.forEach(el => {
						if (el.target.classList.contains('dfd-header-dark')) {
							console.log('.dfd-header-dark added.');
							document.getElementById('light-dark').classList.add('summary');
							console.log('.summary added.');
						}
					}
				)
			}
		);

	mo.observe(document.getElementById('header-container'), {attributes: true});
</script>
Добавьте этот скрипт, включите консоль и посмотрите логи.
Записан
Не будь паразитом, сделай что-нибудь самостоятельно!
*

draff

  • Гуру
  • 5801
  • 434 / 7
  • ищу работу
Re: Добавить класс при условии JS?
« Ответ #13 : 24.02.2020, 16:46:08 »
Проверьте
Код
function init() {
alert(jQuery.fn.jquery);
/*if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}*/
}
Записан
*

icom

  • Давно я тут
  • 830
  • 202 / 4
Re: Добавить класс при условии JS?
« Ответ #14 : 24.02.2020, 16:49:33 »
Код
jQuery(function($){
    $(window).load(function() {
        if ($('#header-container').hasClass('dfd-header-dark')) {
             $('#light-dark').addClass('summary');
        }
    });
});
Записан
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #15 : 26.02.2020, 09:20:21 »
Цитата: draff от 24.02.2020, 16:46:08
Проверьте
Код
function init() {
alert(jQuery.fn.jquery);
/*if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}*/
}
Цитата: icom от 24.02.2020, 16:49:33
Код
jQuery(function($){
    $(window).load(function() {
        if ($('#header-container').hasClass('dfd-header-dark')) {
             $('#light-dark').addClass('summary');
        }
    });
});

Эти не срабатывает
Извините что сразу не ответил, день рождения вчера было.

Но когда ставлю код:
Цитата: robert от 24.02.2020, 15:56:36
Код: JavaScript
<script>
	const 
		mo = new MutationObserver(els => {
					els.forEach(el => {
						if (el.target.classList.contains('dfd-header-dark')) {
							console.log('.dfd-header-dark added.');
							document.getElementById('light-dark').classList.add('summary');
							console.log('.summary added.');
						}
					}
				)
			}
		);

	mo.observe(document.getElementById('header-container'), {attributes: true});
</script>
Добавьте этот скрипт, включите консоль и посмотрите логи.

При классе "dfd-header-light" - нет, все правильно, как только появляется класс "dfd-header-dark" - добавляется класс "summary"
Когда обратно с "dfd-header-dark" на "dfd-header-light" - класс не удаляется "summary" ?


Вот пример что нарыл в коде JS, который был по умолчанию, может вы подскажите по аналогии с ним:
Код
if($el.hasClass('dfd-background-dark')) {
	$headerContainer.removeClass('dfd-header-light').addClass('dfd-header-dark');
	$('#fp-nav').removeClass('dfd-nav-light').addClass('dfd-nav-dark');
	if(lightLogo && lightLogo != '') {
		$headerContainer.find('.logo-for-panel img').attr('src', lightLogo);
		}
	} else {
	$headerContainer.removeClass('dfd-header-dark').addClass('dfd-header-light');
	$('#fp-nav').removeClass('dfd-nav-dark').addClass('dfd-nav-light');
	if(darkLogo && darkLogo != '') {
		$headerContainer.find('.logo-for-panel img').attr('src', darkLogo);
		}
}

Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

draff

  • Гуру
  • 5801
  • 434 / 7
  • ищу работу
Re: Добавить класс при условии JS?
« Ответ #16 : 26.02.2020, 09:48:45 »
Цитата: warlocksp от 26.02.2020, 09:20:21
Эти не срабатывает
Значит не подключен jQuery. Этот код в консоли отрабатывает, и выводит версию jQuery
Код
function init() {
alert(jQuery.fn.jquery);
}
init();
Записан
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #17 : 26.02.2020, 09:52:41 »
Цитата: draff от 26.02.2020, 09:48:45
function init() {
alert(jQuery.fn.jquery);
}
init();
Отработало версия: 1.12.4
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #18 : 26.02.2020, 10:01:48 »
УРА так код срабатывает:

Код
<script>
const
mo = new MutationObserver(els => {
els.forEach(el => {
if (el.target.classList.contains('dfd-header-dark')) {
document.getElementById('light-dark').classList.add('summary');
} else {
if (el.target.classList.contains('dfd-header-light')) {
document.getElementById('light-dark').classList.remove('summary');
}
}

}
)
});
mo.observe(document.getElementById('header-container'), {attributes: true});
</script>
с "dfd-header-light" на "dfd-header-dark" - есть, класс "summary"
с "dfd-header-dark" на "dfd-header-light" - нету, класса "summary"
То что нужно, помогите его сократить ?
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

robert

  • Живу я здесь
  • 4974
  • 457 / 20
Re: Добавить класс при условии JS?
« Ответ #19 : 26.02.2020, 10:13:34 »
Примерно так:
Код: JavaScript
<script>
const
mo = new MutationObserver(els => {
		els.forEach(el => {
				const classes = document.getElementById('light-dark').classList;
				el.target.classList.contains('dfd-header-dark') ? classes.add('summary') : classes.remove('summary');
			}
		)
	}
);

mo.observe(document.getElementById('header-container'), {attributes: true});
</script>
Записан
Не будь паразитом, сделай что-нибудь самостоятельно!
*

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #20 : 26.02.2020, 10:27:25 »
Спасибо большое "robert"  ^-^

Если несколько ID один и тот же класс добавить ?
Как правильно тут прописать: document.getElementById('light-dark')

Например ID:
#ight-dark1, #ight-dark2 - добавить класс "summary"

 
« Последнее редактирование: 26.02.2020, 10:38:53 от warlocksp »
Записан
Мудр не тот, кто знает много, а тот, чьи знания полезны. Эсхил
*

robert

  • Живу я здесь
  • 4974
  • 457 / 20
Re: Добавить класс при условии JS?
« Ответ #21 : 26.02.2020, 11:07:53 »
Цитата: warlocksp от 26.02.2020, 10:27:25
Если несколько ID один и тот же класс добавить ?
Если элементов немного (<4), то не заморачивайтесь, перечисляйте каждый вручную.
P.S. Кстати, хорошее решение:
Цитата: passer от 24.02.2020, 14:35:45
Ну засунь все это в ту функцию которая класс меняет.
Записан
Не будь паразитом, сделай что-нибудь самостоятельно!
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Программное создание материалов в Joomla 3.8+ [ РЕШЕНО ]

Автор dm-krv

 Ответов: 36
Просмотров: 3806 		Последний ответ 12.12.2019, 21:06:08
от MDenis
[РЕШЕНО] Защита сайтов друг от друга при помощи open_basedir

Автор dm-krv

 Ответов: 14
Просмотров: 5710 		Последний ответ 22.04.2019, 17:46:48
от dm-krv
Бесплатный звонок с сайта, через интернет [РЕШЕНО]

Автор dm-krv

 Ответов: 8
Просмотров: 943 		Последний ответ 03.04.2019, 09:43:32
от dm-krv
JQuery: как проигнорировать cors при парсинге? [РЕШЕНО]

Автор dm-krv

 Ответов: 20
Просмотров: 3706 		Последний ответ 17.01.2019, 20:11:58
от fsv
Скроллинг к элементу с определенным классом [РЕШЕНО]

Автор dm-krv

 Ответов: 1
Просмотров: 2158 		Последний ответ 05.11.2018, 08:51:39
от dm-krv