Дайте совет по оптимизации загрузки кнопок на сайте. У меня был готовый 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();
}
...
