Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Ламерские вопросы » Как сократить или оптимизировать скрипт?

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

follor 14.09.2015 Все вопросы » Ламерские вопросы 2402

вопрос

Есть скрипт который скрывает или показывает блоки в зависимости от выбранного селекта. При большом количестве селектов в списке скрипт получается огромным, возможно ли его как то оптимизировать?

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 - 2015-07-1314 сентября 2015 21:56 - #48556

Можете еще

else if

заменить на

if

и сократить идентификаторы, например просто

model_1

и.т.д.

Юзер

243

follor - 2015-07-1314 сентября 2015 22:34 - #48557

werty1001, спасибо)

Юзер

243

follor - 2015-07-1314 сентября 2015 23:51 - #48558

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

Юзер

werty1001 - 2015-07-1315 сентября 2015 15:19 - #48638

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

Юзер

243

follor - 2015-07-1315 сентября 2015 20:01 - #48645

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

PHP-developer

3199

dj-avtosh - 2015-07-1315 сентября 2015 07:54 - #48562

Как вариант:



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';
    });
}

По заказам пишем сюда: @Rud00y

ЯД: 41001679231462
Заказы в telegram (ремонт модулей, оптимизация нагрузок и т.п.):
В телегу писать сразу задачу и бюджет.

PHP-developer

3199

dj-avtosh - 2015-07-1315 сентября 2015 08:09 - #48563

Чуть короче

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';
    });
}

Юзер

243

follor - 2015-07-1315 сентября 2015 09:50 - #48565

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

PHP-developer

3199

dj-avtosh - 2015-07-1315 сентября 2015 09:56 - #48567

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

Юзер

243

follor - 2015-07-1315 сентября 2015 19:53 - #48644

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

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

PHP-developer

3199

dj-avtosh - 2015-07-1316 сентября 2015 02:51 - #48650

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

Юзер

243

follor - 2015-07-1316 сентября 2015 10:02 - #48657

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

Юзер

243

follor - 2015-07-1327 декабря 2015 21:38 - #51371

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