Question

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

我希望增加的尺寸限制为三次点击，并且减小尺寸仅在点击增加尺寸链接后才起作用。因此无法减小默认大小，从而使缩小大小最小，即默认大小。

如果用户更改了字体大小，并导航到网站中的其他页面，我希望显示“新大小”。即font-size不会恢复为默认大小。

以下脚本仅增加和减少font-size和line-height：

(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将设置保存在浏览器中。

这是一个相当不错的jquery plugin for CRUD-ing cookies。

Answer 3

Demo 我更改了JavaScript代码：

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和cookies。

Answer 4

使用两个变量 var incr = 0; var decr = 0; 如果条件限制你的字体大小增加到三次点击，并考虑一点，当你点击按钮，如果点击其他按钮，那么你需要减少其他变量的值，这样你总是得到三次点击增加/减少字体大小。（jsfiddle link 工作.... ）

            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--; }

        }
        });

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

4 个答案: