Как оптимизировать if else?

Question

[Axel0303]

Можно ли как то упростить такие куски кода?

...

else if (document.getElementById('radio-6').checked) {
       ramka5img[0].style.display = "-webkit-inline-box";
	  ramka5img[1].style.display = "-webkit-inline-box";
	  ramka5img[2].style.display = "-webkit-inline-box";
	  ramka5img[3].style.display = "-webkit-inline-box";
	  ramka5img[4].style.display = "none";
	    ramka5.classList.remove('activeramk2');
 ramka5.classList.remove('activeramk3');
   ramka5.classList.add('activeramk4');
	ramka5.classList.remove('activeramk5');
		ramka5.classList.remove('activeramk6');
	ramka5.classList.remove('activeramk7');
	ramka5.classList.remove('activeramk8');
	ramka5.classList.remove('activeramk9');
	
	   document.example_img.classList.add('activeramk4');
  document.example_img.classList.remove('activeramk2');
  document.example_img.classList.remove('activeramk3');
 document.example_img.classList.remove('activeramk5');
	  document.example_img.classList.remove('activeramk6');
  document.example_img.classList.remove('activeramk7');
    document.example_img.classList.remove('activeramk8');
	  document.example_img.classList.remove('activeramk9');
	     $('input[name="tab-btn"][value="1"]').prop('disabled', false);
	 $('input[name="tab-btn"][value="2"]').prop('disabled', false);
	 $('input[name="tab-btn"][value="3"]').prop('disabled', false);
	 $('input[name="tab-btn"][value="4"]').prop('disabled', false);
	 $('input[name="tab-btn"][value="5"]').prop('disabled', true);
$('#mCSB_4_container1 a').on('click', l_image3);
$('#mCSB_2_container2 a').on('click', l_image22225);
 $('#mCSB_2_container3 a').on('click', l_image22226);
  $('#mCSB_2_container4 a').on('click', l_image22227);
   $('#mCSB_2_container5 a').on('click', l_image22228);
    $('#mCSB_2_container6 a').on('click', l_image22229);


	 
	 
	
    }
	else if (document.getElementById('radio-7').checked) {
      ramka5img[0].style.display = "-webkit-inline-box";
	  ramka5img[1].style.display = "-webkit-inline-box";
	  ramka5img[2].style.display = "-webkit-inline-box";
	  ramka5img[3].style.display = "-webkit-inline-box";
	  ramka5img[4].style.display = "-webkit-inline-box";
	   ramka5.classList.remove('activeramk2');
 ramka5.classList.remove('activeramk3');
   ramka5.classList.remove('activeramk4');
	ramka5.classList.add('activeramk5');
		ramka5.classList.remove('activeramk6');
	ramka5.classList.remove('activeramk7');
	ramka5.classList.remove('activeramk8');
	ramka5.classList.remove('activeramk9');
	
	  document.example_img.classList.add('activeramk5');
  document.example_img.classList.remove('activeramk2');
  document.example_img.classList.remove('activeramk3');
    document.example_img.classList.remove('activeramk4');
	  document.example_img.classList.remove('activeramk6');
  document.example_img.classList.remove('activeramk7');
    document.example_img.classList.remove('activeramk8');
	  document.example_img.classList.remove('activeramk9');
	
	 $('input[name="tab-btn"][value="1"]').prop('disabled', false);
	 $('input[name="tab-btn"][value="2"]').prop('disabled', false);
	 $('input[name="tab-btn"][value="3"]').prop('disabled', false);
	 $('input[name="tab-btn"][value="4"]').prop('disabled', false);
	 $('input[name="tab-btn"][value="5"]').prop('disabled', false);

$('#mCSB_4_container1 a').on('click', l_image3);
$('#mCSB_2_container2 a').on('click', l_image22225);
 $('#mCSB_2_container3 a').on('click', l_image22226);
  $('#mCSB_2_container4 a').on('click', l_image22227);
   $('#mCSB_2_container5 a').on('click', l_image22228);
    $('#mCSB_2_container6 a').on('click', l_image22229);
    }

Comments

[Алексей Дубровин]

Можно, знать бы ещё задачу

Answer 1

[Rsa97]

Упростить можно, но по хорошему тут надо переделывать всё, и HTML, и CSS.
Например, блок

ramka5.classList.remove('activeramk2');
 ramka5.classList.remove('activeramk3');
   ramka5.classList.add('activeramk4');
  ramka5.classList.remove('activeramk5');
    ramka5.classList.remove('activeramk6');
  ramka5.classList.remove('activeramk7');
  ramka5.classList.remove('activeramk8');
  ramka5.classList.remove('activeramk9');

переделывается заменой класса на значение атрибута.
ramka5.dataset.activeBorder = '4'; и изменением в css селектора .activeramk4 на [data-active-border="4"]

Comments

[Axel0303]

А остальные варианты, также через атрибуты?

[Axel0303]

И меня больше интересует оптимизация с точки зрения выполнения функции, а не количества символов. Ваш вариант будет выполняться быстрее?

[Rsa97]

Axel0303, Каждый вариант надо смотреть индивидуально. Где-то можно вообще отказаться от JS за счёт изменения в HTML/CSS, где-то можно упростить код за счёт всплытия событий, где-то поменять классы на data-атрибуты и т.д.
Сокращение и упрощение JS-кода, как правило ускоряет работу. Но скорость, хотя и важный параметр, но не самое главный. Код надо приводить к такому состоянию, чтобы его было легко читать.

[Axel0303]

Rsa97, ну в моем случае имеет значение только скорость, все остальное не важно. Читать код кроме меня не кто не будет, если не захочет его скомуниздить. На десктопе нет не каких проблем, но в мобильной версии подвисает на несколько секунд при кадой функции. Но как оказалось проблема не в выполнение а все таки в подгрузке картинок, приходиться делать максимальное сжатие картинок в моб версии - https://euroelectric.kz/test

[Rsa97]

Axel0303,

Читать код кроме меня не кто не будет,

Дык вам же понадобится этот код через несколько лет прочитать, а там...

Answer 2

[Ilya Olovyannikov]

Для начала разберитесь - вы используете jQuery или нативный JS?
Далее для себя напишите алгоритм того, что и как должен выполнять будущий код.
После этого сделайте демо на codepen или jsfiddle
И вот тогда можете структурированно, четко и с примерами задавать вопросы.

Answer 3

[Bone]

Можно, например, заменить на forEach по массиву.

const ids = ['radio-1', 'radio-2'];
ids.forEach(id => {
    if (document.getElementById(id).checked) {
    ...
    }
})

Вместо массива строк с id элементов, можно сделать массив с объектами, содержащими какую-то дополнительную информацию, например:

const items = [{id: 'radio1', element: 'ramka5', image: 'image3'}, ...]