Как подключить LocalStorage к скрипту?

144

31 августа 2019, 12:00

   <ul class="tabs">
    <li class="tab col s3"><a class="btn-25 active" href="#">25%</a></li>
    <li class="tab col s3"><a class="btn-33" href="#">33%</a></li>
    <li class="tab col s3"><a class="btn-50" href="#">50%</a></li>
    <li class="tab col s3"><a class="btn-100" href="#">100%</a></li>
  </ul>
<div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div>
<div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div>
<div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div>
<div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div>
$(function() {
$('.btn-25').click(function() {
$('.zoom').addClass('zoom-25').removeClass('zoom-33 zoom-50 zoom-100');
}); 
$('.btn-33').click(function() {
$('.zoom').addClass('zoom-33').removeClass('zoom-25 zoom-50 zoom-100');
});    
$('.btn-50').click(function() {
$('.zoom').addClass('zoom-50').removeClass('zoom-25 zoom-33 zoom-100');
});
$('.btn-100').click(function() {
$('.zoom').addClass('zoom-100').removeClass('zoom-25 zoom-33 zoom-50');
});
});

Чтобы сохранялся добавленный класс к zoom и у списка active

https://codepen.io/stopani/pen/JxGMWy

Answer 1

$(function() { 
  function updateZoom(zoom) { 
    $('.btn-zoom.active').removeClass('active'); 
    var zooms = []; 
    $('.btn-zoom').each(function() {  
      zooms.push("zoom-" + $(this).data("zoom"));  
      if ($(this).data("zoom") == zoom) 
        $(this).addClass('active'); 
    }); 
    $('.zoom').removeClass(zooms.join(" ")); 
    $('.zoom').addClass('zoom-' + zoom); 
    localStorage.setItem("zoom", zoom); 
  } 
 
  $('.btn-zoom').click(function() { 
    var zoom = $(this).data("zoom"); 
    updateZoom(zoom); 
  }); 
   
  if (localStorage.getItem("zoom")) 
    updateZoom(localStorage.getItem("zoom")); 
});

img { 
  width: 100%; 
} 
 
.zoom { 
  float: left; 
  width: 23%; 
  margin: 2% 1% 0%; 
} 
 
.zoom-25 { width: 23%; } 
.zoom-33 { width: 31.3%; } 
.zoom-50 { width: 48%; } 
.zoom-100 { width: 98%; } 
 
.btn-zoom.active { 
  color:red; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul class="tabs"> 
  <li class="tab col s3"><a class="btn-zoom active" data-zoom="25" href="#">25%</a></li> 
  <li class="tab col s3"><a class="btn-zoom" data-zoom="33" href="#">33%</a></li> 
  <li class="tab col s3"><a class="btn-zoom" data-zoom="50" href="#">50%</a></li> 
  <li class="tab col s3"><a class="btn-zoom" data-zoom="100" href="#">100%</a></li> 
</ul> 
 
<div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> 
<div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> 
<div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div> 
<div class="zoom"><img src="https://i.ibb.co/KLtXjgW/md-5a926256440ed.jpg"></div>