时间戳

首页 > 解决方案 > 如果 div 有类删除类或者添加一个新类

jquery - 如果 div 有类删除类或者添加一个新类

问题描述

我的 WordPress 网站上有一个“-”按钮，我想用它来向<body>我的页面添加一个类以增加字体大小。我还有一个“+”按钮，它会减小字体的大小。

加号按钮 HTML： <div class="biggerTextButton"><p>+</p></div>

减号按钮 HTML： <div class="smallerTextButton"><p>-</p></div>

在样式表中，我有“biggerText”和“smallerText”的样式。我想避免将这两个类都作为一个<body>类（因此我不能只添加/删除/切换类。

我将如何使用 jQuery 来做到这一点？对于“-”按钮，我已经尝试过了，但它不起作用。

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

我认为我错误地使用了 if/else 语句，但看不出它为什么不起作用。显然，上述文本将在线适用于单击“smallerTextButton”，但我会为“biggerTextButton”使用相同的解决方案，并使用适当的类吗？:)

标签： jquerywordpress

解决方案

首先请注意，您的 jQuery 选择器缺少.该类的前缀。

关于您的问题，实现此目的的最简单方法是在body从 clicked 中添加相关类之前从 中删除这两个类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>

推荐阅读