我的本地存儲字體大小最初無法正常工作

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。