Новости Joomla

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

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Добрый день,
Подскажите пожалуйста, посоветуйте

Нужно добавить класс при условии, если 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

  • Гуру
  • 5803
  • 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 »
function init() {
if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}
}
init();

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

ProtectYourSite

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

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #4 : 24.02.2020, 13:41:26 »
А все 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

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

warlocksp

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

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

draff

  • Гуру
  • 5803
  • 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

  • Гуру
  • 5803
  • 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 »
Код
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

  • Гуру
  • 5803
  • 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 »
Проверьте
Код
function init() {
alert(jQuery.fn.jquery);
/*if (jQuery('#header-container').hasClass('dfd-header-dark')) {
jQuery('#light-dark').addClass('summary');
}*/
}
Код
jQuery(function($){
    $(window).load(function() {
        if ($('#header-container').hasClass('dfd-header-dark')) {
             $('#light-dark').addClass('summary');
        }
    });
});

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

Но когда ставлю код:
Код: 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

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

warlocksp

  • Завсегдатай
  • 1198
  • 17 / 4
Re: Добавить класс при условии JS?
« Ответ #17 : 26.02.2020, 09:52:41 »
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 »
Если несколько ID один и тот же класс добавить ?
Если элементов немного (<4), то не заморачивайтесь, перечисляйте каждый вручную.
P.S. Кстати, хорошее решение:
Ну засунь все это в ту функцию которая класс меняет.
Не будь паразитом, сделай что-нибудь самостоятельно!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

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

Автор dm-krv

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

Автор dm-krv

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

Автор dm-krv

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

Автор dm-krv

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

Автор dm-krv

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