将字体大小限制增加和减少到最大和最小jQuery

Question

我有一个jQuery脚本，可以增加或减少我的网站CSS的字体大小和行高。

我希望将增加大小限制为三击，并且减少大小仅在单击增加大小链接后才起作用。 因此，不能减小默认尺寸，因此使减小尺寸最小，即默认尺寸。

如果用户更改字体大小，并导航到站点中的另一个页面，则希望显示“新大小”。 即字体大小不会恢复为默认大小。

以下脚本仅增加和减小字体大小和行高：

(function ($) {
    $.fn.fontResize = function (options) {
        var settings = {
            increaseBtn: $('#incfont'),
            decreaseBtn: $('#decfont')
        };
        options = $.extend(settings, options);
        return this.each(function () {
            var element = $(this);
            options.increaseBtn.on('click', function (e) {
                e.preventDefault();
                var baseFontSize = parseInt(element.css('font-size'));
                var baseLineHeight = parseInt(element.css('line-height'));
                element.css('font-size', (baseFontSize + 2) + 'px');
                element.css('line-height', (baseLineHeight + 2) + 'px');
            });
            options.decreaseBtn.on('click', function (e) {
                e.preventDefault();
                var baseFontSize = parseInt(element.css('font-size'));
                var baseLineHeight = parseInt(element.css('line-height'));
                element.css('font-size', (baseFontSize - 2) + 'px');
                element.css('line-height', (baseLineHeight - 2) + 'px');
            });
        });
    };
})(jQuery);
$(function () {
    $('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize();
});

我为此创建了一个jsfiddle： http : //jsfiddle.net/Lv2x4/

Answer 1

您可以使用变量来跟踪字体大小的增加和减少。 这是您的小提琴和代码的修订版：

(function ($) {
    $.fn.fontResize = function(options){
    var increaseCount = 0;
    var self = this;

    var changeFont = function(element, amount){
      var baseFontSize = parseInt(element.css('font-size'), 10);
      var baseLineHeight = parseInt(element.css('line-height'), 10);
      element.css('font-size', (baseFontSize + amount) + 'px');
      element.css('line-height', (baseLineHeight + amount) + 'px');
    };

    options.increaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 3){ return; }
      self.each(function(index, element){
        changeFont($(element), 2);
      });
      increaseCount++;
        });

    options.decreaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 0){ return; }
      self.each(function(index, element){
        changeFont($(element), -2);
      });
      increaseCount--;
    });
  }
})(jQuery);

$(function () {
    $('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize({
    increaseBtn: $('#incfont'),
    decreaseBtn: $('#decfont')
  });
});

http://jsfiddle.net/Lv2x4/7/

我还使fontResize在调用过程中传递了按钮，如果您尝试将其设计为jQuery组件，则更有意义。 另外，由于更改字体大小的逻辑是重复代码，因此我将其分成了自己的函数，因此您不必重复自己。

编辑：哎呀，也跳过了您想要持久性的部分！ 通过localStorage这很容易。 点击这里。

http://jsfiddle.net/Lv2x4/9/

Answer 2

如果没有后端来存储用户的设置，则需要使用Cookie，sessionStorage或localStorage在浏览器上保存设置。

这是一个用于CRUD-ing cookie的相当不错的jquery插件 。

Answer 3

演示版

我更改的JavaSript代码：

return this.each(function () {
  var element = $(this),
      clicks = 0; // add a clicks counter

  options.increaseBtn.on('click', function (e) {
    e.preventDefault();
    if (clicks < 3) { // make sure limit is not exceeded
      var baseFontSize = parseInt(element.css('font-size'));
      var baseLineHeight = parseInt(element.css('line-height'));
      element.css('font-size', (baseFontSize + 2) + 'px');
      element.css('line-height', (baseLineHeight + 2) + 'px');
      clicks += 1; // increase by 1
    }
  });

  options.decreaseBtn.on('click', function (e) {
    e.preventDefault();
    if (clicks > 0) { // make sure there are clicks left
      var baseFontSize = parseInt(element.css('font-size'));
      var baseLineHeight = parseInt(element.css('line-height'));
      element.css('font-size', (baseFontSize - 2) + 'px');
      element.css('line-height', (baseLineHeight - 2) + 'px');
      clicks -= 1; // decrease number of clicks left
    }
  });

这会起作用。 但是对于用户设置的存储，您将必须使用localstorage，sessionStorage或cookie。

Answer 4

使用两个变量var incr = 0; var decr = 0; 并且如果将字体大小的增量限制为三击的条件，并且还考虑了一件事，即单击按钮时如果单击了其他按钮，则需要减小其他变量的值，以便始终获得三单击以增加/减小字体大小。（ jsfiddle链接正在 工作... ）

            options.increaseBtn.on('click', function (e) {
            e.preventDefault();
            var baseFontSize = parseInt(element.css('font-size'));
            var baseLineHeight = parseInt(element.css('line-height'));

            if(incr<3){
            element.css('font-size', (baseFontSize + 2) + 'px');
            element.css('line-height', (baseLineHeight + 2) + 'px');
            incr++;                
            if(decr>0)
            {decr--;  }
            }
        });
            options.decreaseBtn.on('click', function (e) {
            e.preventDefault();
            var baseFontSize = parseInt(element.css('font-size'));
            var baseLineHeight = parseInt(element.css('line-height'));

            if(decr<3){
            element.css('font-size', (baseFontSize - 2) + 'px');
            element.css('line-height', (baseLineHeight - 2) + 'px');
            decr++;
            if(incr>0)
            {incr--; }

        }
        });