@MrFreeman94

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

Как универсальней написать этот код! Чтобы убрать повторения кода!
У меня будет блок товара
<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');
       
    } 

    
}
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
Tim-A-2020
@Tim-A-2020
Если я правильно понял, то вот
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Что-то типа https://codepen.io/FragsterAt/pen/dyGdLEv но необходимость последнего if в каждом блоке я что-то не понял
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы