Если у div есть класс, удалите класс или добавьте новый класс - PullRequest
Новая
       2

Если у div есть класс, удалите класс или добавьте новый класс

0 голосов
/ 01 мая 2020

У меня есть кнопка «-» на моем веб-сайте WordPress, которую я хочу использовать, чтобы добавить класс на <body> моей страницы для увеличения размера шрифта. У меня также есть кнопка «+», которая уменьшит размер шрифта.

Кнопка «плюс» HTML: <div class="biggerTextButton"><p>+</p></div>

Кнопка «минус» HTML: <div class="smallerTextButton"><p>-</p></div>

В таблице стилей у меня есть стили для 'largeText' и 'smallText'. Чего я хочу избежать, так это чтобы оба этих класса были классом <body> (поэтому я не могу просто добавить / удалить / переключить класс.

Как бы я это сделал с jQuery? Для кнопки '-' Я пробовал это, но это не работает. 

    jQuery('smallerTextButton').click(function (){
        if ( jQuery('body').hasClass('biggerText')) {
            jQuery('body').removeClass('biggerText');
        } else {
            jQuery('body').addClass('smallerText');
        }
    });
});

Я думаю, что я неправильно использую операторы if / else, но не могу понять, почему это не работает. Очевидно, что приведенный выше текст будет применяться к щелкнув на "lessTextButton", но я бы использовал то же решение для "LargeTextButton" с соответствующими классами? :)

1 Ответ

0 голосов
/ 01 мая 2020

Во-первых, обратите внимание, что в селекторе jQuery отсутствует префикс . для класса.

Что касается вашей проблемы, самый простой способ добиться этого - удалить оба класса из * 1004. * перед тем, как добавить соответствующий из нажатых div. Все, что вам нужно сделать, это добавить опцию «нормальный размер», чтобы пользователи могли вернуть размер шрифта к нормальному.

Я бы также предложил вам изменить элементы триггера на кнопки. Поскольку вы делаете это по причинам доступности, вы должны построить HTML в соответствии с лучшими стандартами для программ чтения с экрана. Они по-прежнему могут быть стилизованы, чтобы не выглядеть как кнопки, если вы предпочитаете. 

let $body = $('body');

$('.textAmendmentButton').on('click', function() {
  $body.removeClass('biggerText smallerText').addClass(this.dataset.bodyclass);
});
body { font-size: 1em; }
body.smallerText { font-size: 0.7em; }
body.biggerText { font-size: 2em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="textAmendmentButton" data-bodyclass="biggerText">+</button>
<button type="button" class="textAmendmentButton" data-bodyclass="">N</button>
<button type="button" class="textAmendmentButton" data-bodyclass="smallerText">-</button>

<h1>Foo bar</h1>
<p>Lorem ipsum dolor sit amet consectetur adipscing elit. Lorem ipsum dolor sit amet consectetur adipscing elit. Lorem ipsum dolor sit amet consectetur adipscing elit. Lorem ipsum dolor sit amet consectetur adipscing elit. Lorem ipsum dolor sit amet consectetur adipscing elit. </p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...