Задать вопрос
@zeaovede
javascript

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

Дайте совет по оптимизации загрузки кнопок на сайте. У меня был готовый 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();
}
...
  • Вопрос задан
  • 140 просмотров
6 комментариев
Подписаться 1 Простой 6 комментариев
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 120 000 до 180 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Frontend Developer (JavaScript)
R2C
До 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Нужен профи для настройки прокси
27 июн. 2024, в 20:55
5000 руб./за проект
Разработка сайта с нуля
27 июн. 2024, в 20:33
5000 руб./за проект
Разработать программу работы с текстовыми данными с применением ИИ
27 июн. 2024, в 19:59
35000 руб./за проект
Ещё заказы