Изменение размера шрифта не работает при обновлении страницы - PullRequest
Новая
       10

Изменение размера шрифта не работает при обновлении страницы

0 голосов
/ 08 января 2020

Панель заголовка моей страницы имеет + и - для увеличения и уменьшения шрифта (используя функцию ниже) ...

Это все работает правильно. Я сохраняю новое значение размера шрифта у повара ie.

Желаемый результат, если вы а) обновите sh страницу или б) go на другой странице сайта , он устанавливает размер шрифта в соответствии с тем, что было сохранено ... однако это не тот случай.

Вот мои биты кода ... (используя скрипт. js file) 

var resize = new Array('.resizable');
$(document).ready(function() {
    resize = resize.join(',');

    var resetFont = $(resize).css('font-size');

    $(".reset").click(function(){
        $(resize).css('font-size', resetFont);
        setFontSizeCookieValue(resetFont);
    });

    //increases font size when "+" is clicked
    $(".increase").click(function(){
        event.preventDefault();  
        changeFontSize(true);
        return false;
    });

    //decrease font size when "-" is clicked
    $(".decrease").click(function(){
        changeFontSize(false);
        return false;
    });

    // set the page font size based on cookie
    setPageInitialFontSize();
});

function setPageInitialFontSize() {
    var currentSize = $(resize).css('font-size');
    if (currentSize !== getFontSize()) changeFontSize();
};

// font size changer
function changeFontSize(increase) {
    var currentFontSize = getFontSize();    //getFontSize gets the cookie value or, if not set, returns 16
    var currentFontValue = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSize;
    if (increase !== undefined) newFontSize = Math.floor((increase) ? currentFontValue * 1.2 : currentFontValue * 0.8);
    $(resize).css('font-size', newFontSize);
    setFontSizeCookieValue(newFontSize);
};

Я не показываю кодовые вызовы 'cook ie' (установить и получить), поскольку они работают правильно, устанавливая / получая значения ie cook.

Когда вы нажимаете + или - кнопки, они вызывают функцию changeFontSize с правильным значением параметра. Когда страница загружается / обновляется, вызывается setPageInitialFontSize () ...

Шагая через setPageInitialFontSize, он проверяет текущий размер (16px) с помощью вызова getFontSize (19) и проходит через changeFontSize, который выполняет все свои должен делать, но это похоже на то, что $(resize).css('font-size', newFontSize); на самом деле ничего здесь не делает ...

Так что я мог бы использовать любую помощь, пытаясь выяснить, почему это не работает ...

1 Ответ

1 голос
/ 08 января 2020

Я думаю, это то, чего вы пытаетесь достичь, используйте этот код или следуйте вместе с вашим кодом, просто посмотрите, что вам не хватает, поскольку я не вижу части файлов cookie в вашем коде, проверьте здесь рабочий код https://jsbin.com/wofogejiye/edit?html , js, консоль, выход 

     <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
       <title>Increase and Decrease Font Using Jquery and CSS</title>
      <script type="text/javascript" language="javascript" 
     src="http://code.jquery.com/jquery-latest.js"><
        /script>   

          <script type="text/javascript">

      </script>
  </head>
  <body>
      <input type="button" class="increase" value=" + ">
      <input type="button" class="decrease" value=" - "/>
      <input type="button" class="resetMe" value=" = ">
      <div>Click Respected Buttons to Increase or Decrease the Font </div>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
  $(document).ready(function(){   

          var originalSize = getFontSizeLocalStorage()        
          // reset    
          $('div').css('font-size', originalSize);         
          $(".resetMe").click(function(){           
          $('div').css('font-size', originalSize);         
          });
        $('div').css('font-size'); 
          // Increase Font Size          
          $(".increase").click(function(){         
          var currentSize = getFontSizeLocalStorage()         
          var currentSize = parseFloat(currentSize)*1.2;          
          $('div').css('font-size', currentSize);
            addToLocalStorage(currentSize)
          return false;          
          });        

          // Decrease Font Size       
          $(".decrease").click(function(){        

          var currentSize =getFontSizeLocalStorage()       
          var currentSize = parseFloat(currentSize)*0.8;        
          $('div').css('font-size', currentSize);   
              addToLocalStorage(currentSize)
          return false;         
          });         
        });

        function addToLocalStorage(fontSize){
        window.localStorage.setItem("fontSize",fontSize)
        }
        function getFontSizeLocalStorage(){
        if( window.localStorage.getItem("fontSize")){
        return window.localStorage.getItem("fontSize")
        }
        return $('div').css('font-size')
        }

</script>
...