Переключить два класса, используя mat-slide-toggle

Переключите два класса d-block и d-none с помощью переключателя mat-slide. Когда флажок установлен, мне нужно изменить класс d-none на d-block и d-block на d-none


<mat-slide-toggle >
  View All Statuses
</mat-slide-toggle>

<div class = "row">
    <div class = "col-12 d-block">
      <svg id = "bar-chart" width = "550" height = "300"></svg>
    </div>
    <div class = "col-12 d-none">
      <svg id = "stacked-bar-chart" width = "550" height = "300"></svg>
    </div>
</div>

Какой у Вас вопрос?

— 24.06.2019 13:23

Мне нужно переключить классы d-block и d-none с помощью переключателя mat -slide

— 24.06.2019 13:24

Нет, это не дубликат, так как здесь мне нужно изменить два класса, которые находятся в разных div.

— 24.06.2019 13:37

ты хочешь сделать с помощью javascript

— 24.06.2019 13:40

@Udhay, да, пожалуйста, помогите мне, так как я новичок в javascript, или предоставьте мне какой-нибудь справочный пример

— 24.06.2019 13:42

вы хотите переключить класс на основе события переключения мат-слайд?

— 24.06.2019 13:44

@Udhay, да, когда переключатель отмечен, класс «d-block» должен быть «d-none», а класс «d-none» должен быть «d-block»

— 24.06.2019 13:46

@Curious-Developer проверьте ответ ниже. Вместо события click вы можете добавить событие onchange

— 24.06.2019 13:51

javascript angular-material

24.06.2019 13:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

639

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

попробуйте это, оно сработает, в противном случае вы можете использовать [ngClass] = "bool ? 'd-block' : 'd-none'"

$("#toggleclick").click(function () {
    if ($(".d-block").hasClass("hide"))
    {
      $(".d-block").removeClass("hide");
      $(".d-none").addClass("hide");
    }
    else if ($(".d-none").hasClass("hide")) {
      $(".d-none").removeClass("hide");
      $(".d-block").addClass("hide");
    }
})

.d-block{
  background:#ff0;
}

.d-none{
background:#0ff;
}

.hide{
  display:none;
}

mat-slide-toggle{
cursor:pointer;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<mat-slide-toggle id = "toggleclick">
  View All Statuses
</mat-slide-toggle>

<div class = "row">
    <div class = "col-12 d-block">
      <svg id = "bar-chart" width = "550" height = "300"></svg>
      D-Block
    </div>
    <div class = "col-12 d-none hide">
      <svg id = "stacked-bar-chart" width = "550" height = "300"></svg>
      D-None
    </div>
</div>

24.06.2019 13:50

Ниже код с использованием директивы Angular ngClass

HTML:

<mat-slide-toggle [(ngModel)] = "checked">
  View All Statuses
</mat-slide-toggle>

<div class = "row">
    <div class = "col-12" [ngClass] = "checked ? 'd-none' : 'd-block'">
      <svg id = "bar-chart" width = "550" height = "300"></svg>Hello
    </div>
    <div class = "col-12" [ngClass] = "checked ? 'd-none' : 'd-block'">
      <svg id = "stacked-bar-chart" width = "550" height = "300"></svg>World
    </div>
</div>

CSS:

.d-block {
    display: block;
}

.d-none {
    display: none;
}

24.06.2019 13:55

Другие вопросы по теме

Как я могу сделать так, чтобы только этот `mat-card-subtitle` в этом верхнем заголовке окрашивался в красный цвет?

Angular 6: ОШИБКА Ошибка: не удается найти элемент управления с неуказанным атрибутом имени с угловым материалом и реактивными формами

Исправлена угловая иконка гамбургера

Атрибут поля ввода устанавливается динамически при изменении переключателя

Как уменьшить текст субтитров в карточке Angular Material

Автозаполнение Angular Material с кнопкой очистки очищается нажатием Enter

Макет DatePicker материала Angular 5 перегружается в течение нескольких месяцев

Угловой коврик-ползунок анимируется от 100 до 0 при открытии в диалоге

Угловой выбор материала Необязательный множественный выбор

Angular MatMenu: выделение активного элемента

Переключить два класса, используя mat-slide-toggle

Ответы 2

Другие вопросы по теме

Похожие вопросы