Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Ламерские вопросы Как сократить или оптимизировать скрипт?

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


     14.09.2015    Ламерские вопросы    947

вопрос
Есть скрипт который скрывает или показывает блоки в зависимости от выбранного селекта. При большом количестве селектов в списке скрипт получается огромным, возможно ли его как то оптимизировать?
function Selected(a) {
        var label = a.value;
        if (label==1) {
            document.getElementById("xfield_holder_model").style.display='block';
            document.getElementById("xfield_holder_model1").style.display='none';            
        } else if (label==2) {
            document.getElementById("xfield_holder_model").style.display='none';
            document.getElementById("xfield_holder_model1").style.display='block';  
        } else if (label==3) {
            document.getElementById("xfield_holder_model").style.display='none';
            document.getElementById("xfield_holder_model1").style.display='none';
            document.getElementById("xfield_holder_model3").style.display='block';
        } else if (label==4) {
            document.getElementById("xfield_holder_model").style.display='none';
            document.getElementById("xfield_holder_model1").style.display='none';
            document.getElementById("xfield_holder_model3").style.display='none';
            document.getElementById("xfield_holder_model4").style.display='none';
            document.getElementById("xfield_holder_model5").style.display='block';
        } else {
            document.getElementById("xfield_holder_model").style.display='none';
            document.getElementById("xfield_holder_model1").style.display='none';
            document.getElementById("xfield_holder_model3").style.display='none';
            document.getElementById("xfield_holder_model4").style.display='none';
            document.getElementById("xfield_holder_model5").style.display='none';
        }  
        
}

Ответил: werty1001


function selected(v) {

    var list = document.getElementById('list').children,
        value = parseInt(v);

    for (var i=list.length; i--;) { list[i].style.display='none'; }

    if (value === 1) show(['xfield_holder_model']);
    else if (value === 2) show(['xfield_holder_model1']);
    else if (value === 3) show(['xfield_holder_model3']);
    else if (value === 4) show(['xfield_holder_model5']);

}

function show(el) {
    el.forEach(function(id) {
        document.getElementById(id).style.display='block';
    });
}
Живой пример тык

Комментарии пользователей (13)

werty1001
18

56 | 30

werty1001 - 14 сентября 2015 21:56 - Юзер

Можете еще
else if
заменить на
if
и сократить идентификаторы, например просто
model_1
и.т.д.

follor
1

243 | 10

follor - 14 сентября 2015 22:34 - Юзер

werty1001, спасибо)

follor
1

243 | 10

follor - 14 сентября 2015 23:51 - Юзер

Попытался его использовать, никак не хочет работать, в jsfiddle работает а на сайте не хочет, перепробовал всё а причины конфликта так и не нашёл(

werty1001
18

56 | 30

werty1001 - 15 сентября 2015 15:19 - Юзер

А в консоли что-то есть? Возможно, у вас уже есть функция с названием "show", попробуйте переименовать ее как-нибудь по-другому.

follor
1

243 | 10

follor - 15 сентября 2015 20:01 - Юзер

Смена имени так же не помогла, причину так и не нашел. Нашёл другой скрипт вроде как работающий, но так же требующий корректировок.

dj-avtosh
39

1479 | 390

dj-avtosh - 15 сентября 2015 07:54 - шашлычник

Как вариант:



document.getElementById('selected').addEventListener('change', function() { selected(this.value); }, false);

function selected(v) {

    var list = document.getElementById('list').children, value = parseInt(v);
    
    for (var i=list.length; i--;) { list[i].style.display='none'; }

    obj = {1:'', 2:1, 3:3, 4:5}

    show(['xfield_holder_model' + obj[value]]);

}

function show(el) {
    el.forEach(function(id) {
        document.getElementById(id).style.display='block';
    });
}


skype: elhan.isaev

dj-avtosh
39

1479 | 390

dj-avtosh - 15 сентября 2015 08:09 - шашлычник

Чуть короче
document.getElementById('selected').addEventListener('change', function() { selected(this.value); }, false);

function selected(v) {
    Array.prototype.forEach.call(document.getElementById('list').children, function(element){element.style.display='none';});
    
    obj = {1:'', 2:1, 3:3, 4:5}
    
    show(['xfield_holder_model' + obj[parseInt(v)]]);

}

function show(el) {
    el.forEach(function(id) {
        document.getElementById(id).style.display='block';
    });
}

skype: elhan.isaev

follor
1

243 | 10

follor - 15 сентября 2015 09:50 - Юзер

Опять же, в jsfiddle работает а на сайте не хочет, не пойму в чем проблема, буду искать конфликтующий сркипт, отключая их поочерёдно

dj-avtosh
39

1479 | 390

dj-avtosh - 15 сентября 2015 09:56 - шашлычник

напиши в скайп, гляну.

skype: elhan.isaev

follor
1

243 | 10

follor - 15 сентября 2015 19:53 - Юзер

Нашёл скрипт который вроде как работает на моем сайте, но не получается его оптимизировать под свои нужды
вот то что нашёл

А вот то что у меня

dj-avtosh
39

1479 | 390

dj-avtosh - 16 сентября 2015 02:51 - шашлычник

Опишите логику, что хотите что бы делал скрипт с Вашими выпадающими списками.

skype: elhan.isaev

follor
1

243 | 10

follor - 16 сентября 2015 10:02 - Юзер

По данным из этой ссылки, селект с именем Марка автомобиля - основной, при выборе в нём пункта 1 должен появиться второй селект который ниже модель, при выборе пункта 2 другой селект и т. д.

follor
1

243 | 10

follor - 27 декабря 2015 21:38 - Юзер

Как к этому скрипту прикрутить второй набор селектов? С другим id

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы