我的本地存储字体大小最初无法正常工作

Question

我的本地存储字体大小+ - 然而，一般情况下，加载后初始字体大小+2获取字符串值，例如，初始字体大小（16）+ 2 = 162。 我认为初始大小值应该是一个变量，而不是单纯的字符串。但是，初始字体大小localstorage getitem值是一个字符串。 然后它运作良好。如何将初始字体大小值转换为变量？ 预先感谢您的回答。

<div id="font-size-change"> 
    <span class="font-size-label">font size</span> 
    <button id="fs_up">+</button> 
    <span id="fs_write" style="width:15px;"></span> 
    <button id="fs_down">-</button> 
</div> 

<script> 
$(document).ready(function() { // === Font Size Control ============================================================= 
    var reset = $('#stx').css('fontSize'); // Grab the default font size 
    var elm = $('#stx'); // Font resize these elements 
    var size = localStorage.getItem('size'); 
    var size = parseInt(size, 10); 

    if (size) { 
    elm.css('font-size', size + 'px'); 
    $("#fs_write").text(size); // 
    } else {  
    size = str_replace(reset, 'px', ''); //set the default font size and remove px from the value 
    $("#fs_write").text(size); // 
    } 

    var min = 12; //min 
    var max = 56; //max 
    var p = 4; //increase 
    var m = 4; //decrease 

    $('#fs_up').click(function() { //Increase font size 

    if (size <= max) { //if the font size is lower or equal than the max value 
     size = size + p; //increase the size  
     elm.css({ //set the font size 
    'fontSize': size 
     }); 
    $("#fs_write").text(size); // 
     localStorage.setItem('size', size); 
    }  
    return false; //cancel a click event 
    }); 

    $('#fs_down').click(function() {  
    if (size >= min) { //if the font size is greater or equal than min value  
     size = size - m; //decrease the size  
     elm.css({ //set the font size 
    'fontSize': size 
     }); 
    $("#fs_write").text(size); // 
     localStorage.setItem('size', size); 
    } 
    return false; //cancel a click event 
    }); 

    $('#fs_write').click(function() { //Reset the font size 
    elm.css({ //set the default font size 
     'fontSize': reset 
    }); 
    size = str_replace(reset, 'px', ''); 
    $("#fs_write").text(size); // 
     localStorage.setItem('size', size); 
    }); 

}); 

//A string replace function 
function str_replace(haystack, needle, replacement) { 
    var temp = haystack.split(needle); 
    return temp.join(replacement); 
} 

</script> 

Answer 1

说明：

这是因为+操作者既用作一个arithmithic运营商（如果两个操作数都是数），并作为一个字符串连接运算符（如果操作数中的至少一个是一个字符串）。

您的size变量最初是一个数字，因为您在代码开始时使用parseInt来获取其值。但在#fs_write click事件侦听你等转换回为一个字符串：

size = str_replace(reset, 'px', '');  // size is now a string because the return value of str_replace is a string 

那么当#fs_up点击情况，您可以添加p到size（现在是一个字符串）：

size = size + p;       // string concatenation is chosen over arithmitic addition because one of the operands (size) is a string 

这导致问题。

解决方案：

只是变换size成若干使用使用+操作前：Number，parseInt或unary +操作：

size = +size + p;      // using the unary + (now size is a number and p is also a number thus the arithmitic addidtion is chosen over the string concatenation) 
// or 
size = Number(size) + p;     // using Number 

注：

1. #fs_down单击事件侦听器不会导致此问题，因为-运算符仅用作算术运算符。所以当一个或两个操作数是一个字符串时，它会自动用作一个数字（"55" - "10" === 45，但是"55" + 10 === "5510"）。
2. 您在您的代码开始时重新声明size，这是不必要的。留下第一个var size = ...;并使用第二个size = ...;而不是var。