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

Question

[zeaovede]

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

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



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



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

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();
}
...

Comments

[serhiops]

циклы...

[zeaovede]

serhiops, кнопки нужно поместить в циклы?

[szQocks]

zeaovede, а чё за мода клепать сайты для бустов ? хайп или что это ?

[Froggyweb]

табы можно подгружать аяксом. Надо или нет - сложный вопрос.

[WbICHA]

По умолчанию скрой всё, через скрипт пусть отобразится только то, что надо.

[zeaovede]

WbICHA, благодарю за совет, мне удалось справиться с этим. Получилось просто и эффективно