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

Question

[amazinginternetsites]

Здравствуйте, друзья.
Написал код, но кажется он может выглядеть гораздо красивее.
Дело в том, что первая часть дублирует вторую часть, меняются только переменные.
Как оптимизировать. Заранее спасибо.

//ПЕРВАЯ ЧАСТЬ

$(function() {

var update12 = function() {
             var val = +this.value;
             var showFirst = [4].indexOf(val) >= 0;
			 var showSecond = [3,4,5,6,8].indexOf(val) >= 0;
			 $('#f_lr1gr2').toggle(showFirst);
			 $('#f_lr1grt').toggle(showSecond);
			 !showFirst && $('#f_lr1gr2 select').val(1).change();
			 !showSecond && $('#f_lr1grt select').val(1).change();
			 };
			 

var update44 = function() {
             var val = +this.value;
             var showFirst = [8].indexOf(val) >= 0;
			 $('#f_lr1gr2el1').toggle(showFirst);
			 $('#f_lr1gr2el2').toggle(showFirst);
			 $('#f_lr1gr2el3').toggle(showFirst);
			 $('#f_lr1gr2el4').toggle(showFirst);
			 $('#f_lr1gr2el5').toggle(showFirst);
			 !showFirst && $('#f_lr1gr2el1 select').val(1).change();
			 !showFirst && $('#f_lr1gr2el2 select').val(1).change();
			 !showFirst && $('#f_lr1gr2el3 select').val(1).change();
			 !showFirst && $('#f_lr1gr2el4 select').val(1).change();
			 !showFirst && $('#f_lr1gr2el5 select').val(1).change();
			 };

 $('#lr1rt').change(update12).change();
$('#lr1rt').change(update44).change();

     });

//ВТОРАЯ ЧАСТЬ

	$(function() {

var update112 = function() {
             var val = +this.value;
             var showFirst = [4].indexOf(val) >= 0;
			 var showSecond = [3,4,5,6,8].indexOf(val) >= 0;
			 $('#f_sp1gr2').toggle(showFirst);
			 $('#f_sp1grt').toggle(showSecond);
			 !showFirst && $('#f_sp1gr2 select').val(1).change();
			 !showSecond && $('#f_sp1grt select').val(1).change();
			 };
			 

var update144 = function() {
             var val = +this.value;
             var showFirst = [8].indexOf(val) >= 0;
			 $('#f_sp1gr2el1').toggle(showFirst);
			 $('#f_sp1gr2el2').toggle(showFirst);
			 $('#f_sp1gr2el3').toggle(showFirst);
			 $('#f_sp1gr2el4').toggle(showFirst);
			 $('#f_sp1gr2el5').toggle(showFirst);
			 !showFirst && $('#f_sp1gr2el1 select').val(1).change();
			 !showFirst && $('#f_sp1gr2el2 select').val(1).change();
			 !showFirst && $('#f_sp1gr2el3 select').val(1).change();
			 !showFirst && $('#f_sp1gr2el4 select').val(1).change();
			 !showFirst && $('#f_sp1gr2el5 select').val(1).change();
			 };

 $('#sp1rt').change(update112).change();
$('#sp1rt').change(update144).change();

     });

Comments

[lega]

весь код можно сократить до 2х строк, habrahabr.ru/post/272125

[amazinginternetsites]

lega: Вы как всегда кстати, спасибо, что и тут подсказываете.
Мне проще с шаблоном понимать, не подскажете? А там я как обычно, буду копаться.
Заранее спасибо

[lega]

amazinginternetsites: Я не знаю что вы хотите получить, дайте рабочий пример, а я его оптимизирую.

[amazinginternetsites]

lega: https://jsfiddle.net/bq8nt1h3/3/

[amazinginternetsites]

lega: почему-то в примере js не работает, но думаю он и не нужен. Разве что для того, чтобы знать зависимости.

[lega]

amazinginternetsites: Логика все равно не понятна, поэтому завязал все на 1 селект jsfiddle.net/lega911/8w5u744q
Добавил только al-value и al-show, логику скрытия можете подкрутить в al-show

[amazinginternetsites]

lega: спасибо за решение, очень просто все. Такой вопрос, у меня поля выводятся циклом. И я не могу добавить в конструкцию al-show="lr1rt > 1". Скорее всего, ничего не получится?

Answer 1

[Артур Атнагулов]

Селекторы надо запоминать в переменные и вызывать лишь однажды. Операции с DOM всегда долгие.
Вот такие вещи

$('#f_sp1gr2el1').toggle(showFirst);
$('#f_sp1gr2el2').toggle(showFirst);
$('#f_sp1gr2el3').toggle(showFirst);
$('#f_sp1gr2el4').toggle(showFirst);
$('#f_sp1gr2el5').toggle(showFirst);
!showFirst && $('#f_sp1gr2el1 select').val(1).change();
!showFirst && $('#f_sp1gr2el2 select').val(1).change();
!showFirst && $('#f_sp1gr2el3 select').val(1).change();
!showFirst && $('#f_sp1gr2el4 select').val(1).change();
!showFirst && $('#f_sp1gr2el5 select').val(1).change();

можно делать так:

var $elems = $('#f_sp1gr2el1, #f_sp1gr2el2 #f_sp1gr2el3, #f_sp1gr2el4, #f_sp1gr2el5');
$elems.toggle(showFirst);
!showFirst && $elems.find('select').val(1).change();

Comments

[amazinginternetsites]

скажите, а запятые разве не после каждой переменной должны стоять?

[Артур Атнагулов]

amazinginternetsites: поправил.

Answer 2

[Aksigera]

Для таких вещей стоит использовать конструкторы. И для переключения каждого элемента существуют циклы (for, while).
Переписал пример с использованием конструктора (избавляемся от дублирования кода) и добавил циклы. Что именно делает пример, разбираться не стал - думаю, сами прикрутите.

function Update(idFirst, idSecond,idThird,someAnotherNumberOfId,howMuchYouWant) {
    update1 = function () {
        var val = +this.value;
        var showFirst = [4].indexOf(val) >= 0;
        var showSecond = [3, 4, 5, 6, 8].indexOf(val) >= 0;
        $(idFirst).toggle(showFirst);
        $(idSecond).toggle(showSecond);
        !showFirst && $(idFirst + ' select').val(1).change();
        !showSecond && $(idSecond + ' select').val(1).change();
    };

    update2 = function(){
        var iterations = 5;
        if(howMuchYouWant){
            iterations = howMuchYouWant;
        }
        var idS=[];
        for(var i=0;i<iterations;i++){                    //Создаем массив ИДшников
            idS.push(idFirst+'el'+someAnotherNumberOfId);
            someAnotherNumberOfId+=1;
        }
        console.log(idS);
        var val = +this.value;
        var showFirst = [8].indexOf(val) >= 0;
        for(var i=0;i<iterations;i++){     //Переключаем на каждом .toggle(showFirst)
            $(idS[i]).toggle(showFirst);
            !showFirst && $(idS+' select').val(1).change();
        }
    }
    $(idThird).change(update1).change();
    $(idThird).change(update2).change();
}
var firstUpdate= new Update('#f_lr1gr2','#f_lr1grt','#lr1rt',1);
var secondUpdate= new Update('#f_lr1gr2','#f_lr1grt','#sp1rt',1);


firstUpdate();
secondUpdate();

Исправил очепятку