上一篇: 在touchmove上禁用jquery选择以启... 下一篇:jquery – 取消SingleDate

jquery – 切换2个更改字体大小的按钮

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 切换2个更改字体大小的按钮，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有2个按钮,每个按钮可以改变正文字体大小.
我想制作切换按钮.
这是我到目前为止尝试过的
[ https://jsfiddle.net/a6oscu8n/] @H_403_10@

@H_403_10@

<style>
html { font-size:13px; }
html.big { font-size:18px; }
html.default { font-size:13px; }
</style>

<a href="#" data-size="big" class="font_resize">bigger</a><br> 
<a href="#" data-size="small" class="font_resize">default</a><br> 


texttexttexttext<br>  

$(function() { 
  $('.font_resize').on('click',function() {
    $('html')
      .attr('class','')
      .addClass($(this).data('size'));
  }); 
});

解决方法

您可以使用文本切换按钮.您还可以在下面的两个类之间切换. @H_403_10@

@H_403_10@

$(function() {
  $('.font_resize').on('click',function() {
    $(this).text(function(i,text) {
      return text === "bigger" ? "default" : "bigger";
    })
    $('html').toggleClass("small big");
  });
});

html {
  font-size: 13px;
}

html.big {
  font-size: 18px;
}

html.default {
  font-size: 13px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-size="big" class="font_resize">bigger</a><br>
<br> texttexttexttext