@zeaovede

Как грамотно оптимизировать загрузку кнопок на сайте?

Дайте совет по оптимизации загрузки кнопок на сайте. У меня был готовый js код, и я его расширил по аналогии, для возможности установить более гибкий прайс. Знаний js увы нет, выбирать как лучше сделать не приходилось. Как итог это работает, но при загрузке страницы сперва выводятся все кнопки из html, и только потом к работе подключается скрипт, чтобы скрыть лишнее и показать нужное. Выглядит это так себе.

Начало загрузки страницы

66758255d4218142068662.png

Загрузка завершена

667583e86eabe906776316.png

Говнокода получилось много, в качестве примера:

html
<!--Iron-->
<input class="radio-btn" type="radio" name="current-lp-1" value="0" id="current_input_0" checked="">
<label class="lift mr-2 division-select"  id="current_label_0" for="current_input_0">
<div>0</div>
</label>
<input class="radio-btn" type="radio" name="current-lp-1" value="1" id="current_input_1">
<label class="lift mr-2 division-select" id="current_label_1" for="current_input_1">
<div>1</div>
</label>
<input class="radio-btn" type="radio" name="current-lp-1" value="2" id="current_input_2">
<label class="lift mr-2 division-select"  id="current_label_2" for="current_input_2">
<div>2</div>
</label>
<!--Bronze-->
<input class="radio-btn" type="radio" name="current-lp-2" value="3" id="current_input_3" checked="">
<label class="lift mr-2 division-select" id="current_label_3" for="current_input_3">
<div>0</div>
</label>
<input class="radio-btn" type="radio" name="current-lp-2" value="4" id="current_input_4">
<label class="lift mr-2 division-select"  id="current_label_4" for="current_input_4">
<div>1</div>
</label>
<input class="radio-btn" type="radio" name="current-lp-2" value="5" id="current_input_5">
<label class="lift mr-2 division-select"  id="current_label_5" for="current_input_5">
<div>2</div>
</label>
<input class="radio-btn" type="radio" name="current-lp-2" value="6" id="current_input_6">
<label class="lift mr-2 division-select"  id="current_label_6" for="current_input_6">
<div>3</div>
</label>
<!--Silver-->
<input class="radio-btn" type="radio" name="current-lp-3" value="7" id="current_input_7" checked="">
<label class="lift mr-2 division-select" id="current_label_7" for="current_input_7">
<div>0</div>
</label>
<input class="radio-btn" type="radio" name="current-lp-3" value="8" id="current_input_8">
<label class="lift mr-2 division-select"  id="current_label_8" for="current_input_8">
<div>1</div>
</label>
<input class="radio-btn" type="radio" name="current-lp-3" value="9" id="current_input_9">
<label class="lift mr-2 division-select"  id="current_label_9" for="current_input_9">
<div>2</div>
</label>
<input class="radio-btn" type="radio" name="current-lp-3" value="10" id="current_input_10">
<label class="lift mr-2 division-select"  id="current_label_10" for="current_input_10">
<div>3</div>
</label>
...


js
if (current_tier_num === "1") {
       
       switch (current_lp_1) {
        case '0':
            lp_discount = 0;
            break;
        case '1':
            lp_discount = 0.33;
            break;
        case '2':
            lp_discount = 0.66;
            break;

    }
   //diamond
  $('#current_label_33').hide();
  $('#current_label_32').hide();
  $('#current_label_31').hide();
  $('#current_label_30').hide();
  $('#current_label_29').hide();
  $('#current_label_28').hide(); 
  $('#current_label_27').hide();
  //emerald
  $('#current_label_26').hide();
  $('#current_label_25').hide();
  $('#current_label_24').hide();
  $('#current_label_23').hide();
  $('#current_label_22').hide(); 
  $('#current_label_21').hide();
  //platinum
  $('#current_label_20').hide();
  $('#current_label_19').hide();
  $('#current_label_18').hide();
  $('#current_label_17').hide(); 
  $('#current_label_16').hide();
   //gold
  $('#current_label_15').hide();
  $('#current_label_14').hide();
  $('#current_label_13').hide(); 
  $('#current_label_12').hide();
  $('#current_label_11').hide()     
   //silver
  $('#current_label_10').hide();
  $('#current_label_9').hide();
  $('#current_label_8').hide(); 
  $('#current_label_7').hide();
  //bronze
  $('#current_label_6').hide();
  $('#current_label_5').hide();
  $('#current_label_4').hide(); 
  $('#current_label_3').hide();
  //iron
  $('#current_label_2').show();
  $('#current_label_1').show();
  $('#current_label_0').show();
} else if (current_tier_num === "2") {
            switch (current_lp_2) {
        case '3':
            lp_discount = 0;
            break;
        case '4':
            lp_discount = 0.25;
            break;
        case '5':
            lp_discount = 0.50;
            break;
        case '6':
            lp_discount = 0.75;
            break;

    }
   //diamond
  $('#current_label_33').hide();
  $('#current_label_32').hide();
  $('#current_label_31').hide();
  $('#current_label_30').hide();
  $('#current_label_29').hide();
  $('#current_label_28').hide(); 
  $('#current_label_27').hide();
  //emerald
  $('#current_label_26').hide();
  $('#current_label_25').hide();
  $('#current_label_24').hide();
  $('#current_label_23').hide();
  $('#current_label_22').hide(); 
  $('#current_label_21').hide();
  //platinum
  $('#current_label_20').hide();
  $('#current_label_19').hide();
  $('#current_label_18').hide();
  $('#current_label_17').hide(); 
  $('#current_label_16').hide();
    //gold
  $('#current_label_15').hide();
  $('#current_label_14').hide();
  $('#current_label_13').hide(); 
  $('#current_label_12').hide();
  $('#current_label_11').hide()
   //silver
  $('#current_label_10').hide();
  $('#current_label_9').hide();
  $('#current_label_8').hide(); 
  $('#current_label_7').hide();
  //bronze
  $('#current_label_6').show();
  $('#current_label_5').show();
  $('#current_label_4').show(); 
  $('#current_label_3').show();
  //iron
  $('#current_label_2').hide();
  $('#current_label_1').hide();
  $('#current_label_0').hide();
} else if (current_tier_num === "3") {
            switch  (current_lp_3) {
        case '7':
            lp_discount = 0;
            break;
        case '8':
            lp_discount = 0.35;
            break;
        case '9':
            lp_discount = 0.55;
            break;
        case '10':
            lp_discount = 0.75;
            break;

    }
   //diamond
  $('#current_label_33').hide();
  $('#current_label_32').hide();
  $('#current_label_31').hide();
  $('#current_label_30').hide();
  $('#current_label_29').hide();
  $('#current_label_28').hide(); 
  $('#current_label_27').hide();
  //emerald
  $('#current_label_26').hide();
  $('#current_label_25').hide();
  $('#current_label_24').hide();
  $('#current_label_23').hide();
  $('#current_label_22').hide(); 
  $('#current_label_21').hide();
  //platinum
  $('#current_label_20').hide();
  $('#current_label_19').hide();
  $('#current_label_18').hide();
  $('#current_label_17').hide(); 
  $('#current_label_16').hide();
   //gold
  $('#current_label_15').hide();
  $('#current_label_14').hide();
  $('#current_label_13').hide(); 
  $('#current_label_12').hide();
  $('#current_label_11').hide()
   //silver
  $('#current_label_10').show();
  $('#current_label_9').show();
  $('#current_label_8').show(); 
  $('#current_label_7').show();
  //bronze
  $('#current_label_6').hide();
  $('#current_label_5').hide();
  $('#current_label_4').hide(); 
  $('#current_label_3').hide();
  //iron
  $('#current_label_2').hide();
  $('#current_label_1').hide();
  $('#current_label_0').hide();
}
...
  • Вопрос задан
  • 143 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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