Question

我的代码存在问题，我自己无法解决。

我有一个放大/缩小功能，由按钮触发，工作正常。我保存cookie中增加/减少的值，以便在网站上切换页面时保留缩放。这也可以正常工作，但是一旦我切换页面，输入/输出功能就不再起作用了。

我认为这是因为cookie值或cookie值类型的小数位太多......但我无法弄清楚为什么我的代码不起作用。

所以任何帮助都会受到赞赏：）

jQuery(document).ready(function($) {

    $('#zoom-in').click(function() {
        updateZoom(0.1);
    });

    $('#zoom-out').click(function() {
        updateZoom(-0.1);
    });

    function setCookie(name, value, days) {
        var d = new Date;
        d.setTime(d.getTime() + 24*60*60*1000*days);
        document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
    }

    function getCookie(name) {
        var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
        return v ? v[2] : null;
    }

    zoomLevel = getCookie('zoom_level');

    if (zoomLevel == null) {
      zoomLevel = 1;
    }

    $('body').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });

    function updateZoom(zoom) {
        zoomLevel += zoom;
        //zoomLevel = parseFloat(zoomLevel).toFixed(1);
        //zoomLevel = parseInt(zoomLevel);
        if (zoomLevel >= 1) {
            $('body').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });
            setCookie('zoom_level', zoomLevel, 1);
        }
    };

});

Answer 1

这个问题似乎是由浮点（十进制）计算时的精度错误引起的。我解决了以下问题。我希望这可以帮助并为某人节省时间：）

jQuery(document).ready(function($) {

// Set - Get - Delete cookie function here 

let zoomLevel = 1;

if (getCookie('zoom_level')) {
    zoomLevel = getCookie('zoom_level')
};

$('body').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });

$('#zoom-in').click(function() {
    zoomLevel = (zoomLevel * 10 + 1) / 10;
    $('body').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });
    setCookie('zoom_level', zoomLevel, 1);
});

$('#zoom-out').click(function() {
    zoomLevel = (zoomLevel * 10 - 1) / 10;
    if (zoomLevel >= 1) {
        $('body').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });
        setCookie('zoom_level', zoomLevel, 1);
    };
});

});

通过cookie问题保持css缩放值

1 个答案: