загрузчик 4 скрыть элемент с помощью JS

Question

Я хочу скрыть некоторые элементы на странице, которые используют класс 'd-md-block'.Из-за важности определения класса я не могу использовать функции jquery hide / show.

Пример, я хочу, чтобы элемент был виден на рабочем столе

<div id="test" class="d-none d-md-block">Welcome User!</div>

Видимость работает, как и ожидалось.Затем, когда пользователь нажимает кнопку, я хочу переключить видимость (это происходит из-за класса d-md-none)

 $('#btn').on('click',function(){$('#test').hide();});
   $('#anotherBtn').on('click',function(){$('#test').show();});

Есть идеи, как это исправить?

Answer 1

Существует простой способ показать и скрыть элемент в bootstrap-4.Поскольку класс d-none назначает свойство display: none !imporatant, вы можете просто добавить и удалить этот класс с помощью JavaScript, чтобы имитировать операции hide и show.Как то так:

$('#btn').on('click', function() {
  $('#test').removeClass('d-block')
});
$('#anotherBtn').on('click', function() {
  $('#test').addClass('d-block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="test" class="d-none d-md-block">Welcome User!</div>
<button id='btn'>Hide</button>
<button id='anotherBtn'>Show</button>