Оптимизация jq скипта?

Question

Как универсальней написать этот код?! Чтобы убрать повторения кода! У меня будет блок товара:

<article>Товар 1</article>
<article>Товар 2</article>
<article>Товар 3</article>
<article>Товар 4</article>
<article>Товар 5</article>
<article>Товар 6</article>
<article>Товар 7</article>
<article>Товар 8</article>

Нужно чтобы при нажатии на первую кнопку button class="grid-button", тег article был 100%, на вторую кнопку 50% и т.д

<div class="change-grid-button">
          <button class="grid-button" data-grid-id='1'></button>
          <button class="grid-button" data-grid-id='2'></button>
          <button class="grid-button" data-grid-id='3'></button>
          <button class="grid-button" data-grid-id='4'></button>
 </div>



 .product-one {
        width: 100%;
    }
    .product-two {
        width: 50%;
    }
    .product-tree {
        width: 33.33%;
    }
    .product-four {
        width: 25%;
    }


function GridList() {
    let grid1 = 'product-one';
     
    let grid2 = 'product-two';
    
    let grid3 = 'product-three';
    
    let grid4 = 'product-four';
    

 // Click button grid1
    $('.grid-to-1').click(function () { 
        localStorage.removeItem('grid2');
        localStorage.removeItem('grid3');
        localStorage.removeItem('grid4');
        localStorage.setItem('grid1', JSON.stringify(grid1));
         $("#js-product-list > div > article").removeClass("product-two product-three product-four").addClass('product-one');
     });  
     if (JSON.parse(localStorage.getItem('grid1'))  == 'product-one') {        
        $("#js-product-list > div > article").removeClass("product-two product-three product-four").addClass('product-one');
             
     } 
    
    // Click button grid2
    

     $('.grid-to-2').click(function () { 
       
        
        localStorage.removeItem('grid1');
        localStorage.removeItem('grid3');
        localStorage.removeItem('grid4');
        localStorage.setItem('grid2', JSON.stringify(grid2)); 
        $("#js-product-list > div > article").removeClass("product-one product-three product-four").addClass('product-two');    
    });
    if (JSON.parse(localStorage.getItem('grid2')) == 'product-two') {   
        $("#js-product-list > div > article").removeClass("product-one product-three product-four").addClass('product-two');      
    } 

    // Click button grid3
    
    $('.grid-to-3').click(function () {  
        localStorage.removeItem('grid1');
        localStorage.removeItem('grid2');
        localStorage.removeItem('grid4');
        localStorage.setItem('grid3', JSON.stringify(grid3));
        $("#js-product-list > div > article").removeClass("product-two product-one product-four").addClass('product-three'); 
    });
    if (JSON.parse(localStorage.getItem('grid3'))  == 'product-three') {   
        $("#js-product-list > div > article").removeClass("product-two product-one product-four").addClass('product-three'); 
       
    }

    // Click button grid4
   
    
    $('.grid-to-4').click(function () {    
        localStorage.removeItem('grid1');
        localStorage.removeItem('grid2');
        localStorage.removeItem('grid3');
        localStorage.setItem('grid4', JSON.stringify(grid4));
        $("#js-product-list > div > article").removeClass("product-two product-one product-three").addClass('product-four');
    });
    if (JSON.parse(localStorage.getItem('grid4'))  == 'product-four') {   
        $("#js-product-list > div > article").removeClass("product-two product-one product-three").addClass('product-four');
       
    }

Answer 1

Я правильно понял задачу?

let product_col = /*localStorage.getItem('ProductCol') || */1; // Получаем сохранённую запись в localStorage, если её нет, то подефолту будем использовать 1

$('.buttons-grid') // Далее берём родителя с кнопками
  .find('button[data-grid="'+product_col+'"]') // находим ту кнопку, которая содержит data-grid равный записи из localStorage
  .addClass('--active'); // Добавляем ей класс --active, который после будем визуализировать.. Не обязательно, но для удобства пользователей.
$('.products-grid') // Далее родителю карточек с товаром..
  .css('--product-col', product_col); // .. выдаём CSS переменную, с той же записью из localStorage

$('.buttons-grid') // Тут нажатия.
  .on('click', 'button[data-grid]', function(){ // Создаём делегирование события для родителя с кнопками, что при нажатии кнопки будем выполнять следующее:
  if(!$(this).hasClass('--active')) { // Условие: Если нажатая кнопка не имеет класс --active, то выполняем код. Зачем? А зачем нам лишнии пересчёты, если по факту ничего не изменится.
    product_col = $(this).attr('data-grid'); // Получаем то, что записанно в атрибут data-grid у нажатой кнопки
    $('.buttons-grid').find('button.--active').removeClass('--active'); // Находим ту кнопку, которая была "активна" и удаляем её "активный" класс..
    $(this).addClass('--active'); // .. и добавляем его той, которая нажата сейчас
    $('.products-grid').css('--product-col', product_col); // Далее, так же как и в начале, меняем CSS переменную у родителя с карточками товаров
    //localStorage.setItem('ProductCol', product_col); // И записываем новое значение в localStorage
  }
});

.products-grid { /* Очень удобно создавать карточки использую технологию Grid Layout */
  display: grid;
  --product-col: 1; /* Это CSS переменная */
  grid-template-columns: repeat(var(--product-col), 1fr); /* Переменная содержит число - это кол-во дочерних элементов, которое вместится во всё пространство родителя, с учётом отступов родителя и .. */
  grid-gap: 10px; /* .. вот этими отступами, между дочерними элементами. */
  width: 100%;
}

.buttons-grid > button.--active {
  border-color: green;
}

.products-grid > article {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 200px;
  background: #ccc;
  position: relative;
}

.products-grid > article::before {
  content: '';
  display: block;
  height: 0;
  padding-top: 100%;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="buttons-grid">
  <button data-grid="1">1</button>
  <button data-grid="2">2</button>
  <button data-grid="3">3</button>
  <button data-grid="4">4</button>
</div>

<div class="products-grid">
  <article>Товар 1</article>
  <article>Товар 2</article>
  <article>Товар 3</article>
  <article>Товар 4</article>
  <article>Товар 5</article>
  <article>Товар 6</article>
  <article>Товар 7</article>
  <article>Товар 8</article>
</div>

Закомментированые участки кода нужно разкомментировать, ибо здесь, в сниппете, они не сработают.

БЛОГ НА HUSL

Оптимизация jq скипта?

Ответы (1 шт):