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

Question

[MrFreeman94]

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

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

и нужно чтобы при нажатии на первую кнопку чтобы 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');
       
    } 

    
}

Comments

[Евгений]

Думаю проблему решит хорошая структура данных и цикл

[Антон Антон]

Накидай то, что сейчас на jsfiddle/codepen

[MrFreeman94]

Антон Антон, https://codepen.io/DenisUzer94/pen/GRoQLdv

Answer 1

[Tim]

Если я правильно понял, то вот

Comments

[MrFreeman94]

Тим, спасибо за ваш ответ! А если у меня будет блок товара

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

и нужно чтобы при нажатии на первую кнопку чтобы article был 100%, на вторую кнопку 50% и т.д

[Tim]

MrFreeman94, Если мой ответ помог Вам, то отметьте решением

Answer 2

[Антон Антон]

Что-то типа https://codepen.io/FragsterAt/pen/dyGdLEv но необходимость последнего if в каждом блоке я что-то не понял