Есть ли у bootstrap следующая возможность?

Question

[Николай]

Добрый день!

Есть ли в bootstrap 4 следующий функционал?
Хочу что бы работало следующим образом: выбираю например .search-btn даю ему атрибут data-triger="search-input", потом выбираю цель для тригера например .search-input . И что бы при клике на .search-btn(data-triger="search-input") добавлялся класс к .search-input . Надеюсь понятно объяснил.

Answer 1

[Alams Stoyne]

У bootstrap - НЕТ но написать такое дело 3 минут.

$(document).on("click","[data-triger-class]",function(e){
        e.preventDefault();
        let target = $(this).data('triger-class');
        $('.'+target).addClass('new_class');
    });

Comments

[Николай]

Списибо! Все работает! А как теперь мне удалять класс у активного если я кликаю на другой тригер?

$(document).ready(function() {

	$(document).on("click", "[data-triger-class]", function(e){
		e.preventDefault();
		let target = $(this).data('triger-class');
		$('.' + target).toggleClass('active');
	});


})

[Alams Stoyne]

Николай, если в качестве изменяемого элемента тот же - то при toggleClass('active') если класс active есть у элемента он будет удален.

[Николай]

Alams Stoyne, то что toggle удаляет и добавляет это понятно. А как сделать, что при нажатии на тригер в другой части страницы удалялся у предыдущего активного элемента класс active

[Alams Stoyne]

Николай, можно добавить общий класс и каждый раз убирать у всех active а нужному добавлять

<a href="#" data-triger-class="one"></a>
    <a href="#" data-triger-class="two"></a>
    <div class="trigger one"></div>
    <div class="trigger two"></div>

$(document).on("click","[data-triger-class]",function(e){
        e.preventDefault();
        let target = $(this).data('triger-class');
        $('.trigger' ).removeClass('active');
        $('.'+target).addClass('active');
});

[Николай]

Alams Stoyne, точно! Спасибо!

[Alams Stoyne]

Николай, думаю так даже правильнее

$(document).ready(function () {
  $(document).on("click","[data-triger-class]",function(e){
        e.preventDefault();
        let target = $(this).data('triger-class');
        if($('.'+target).hasClass('active')){
          $('.trigger' ).removeClass('active');
        }else{
          $('.trigger' ).removeClass('active');
          $('.'+target).addClass('active');
        }
  });
});