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

Question

[vikholodov]

Это фильтр объектов, есть 2 выпадающих списка и 1 слайдер, 2 выпадающих списка работают как надо, хоть код не идеален, мягко говоря. Прикрутил еще слайдер и вот теперь не могу понять как заставить их работать в "команде", т.е. чтобы слайдер скрывал и показывал объекты в рамках отфильтрованных объектов двумя select'ами. Вот сам фильтр https://sensnet.ru/kaliningrad/tarify/

$( "#slider" ).slider({
        animate: true,
        range: "min",
        value: 50,
        min: 100,
        max: 1000,
       step: 50,
        slide: function( event, ui ) {
            $( "#slider-result" ).html( ui.value );

        },
        change: function(event, ui) {
            $('#hidden').attr('value', ui.value);
            $('.item-cost').each(function(index) {
              if (ui.value > $(this).text() ){
                $(this).parent().parent().parent().parent().parent().fadeOut();
              } else {
               $(this).parent().parent().parent().parent().parent().fadeIn();
              }

            });
        }

});

</script>
<script>

    $(document).on('change', '#choose', function (e) {
        var valueSelected = this.value;
        var providerSelected = $('#provider_select').val();
        if (valueSelected !== "Все") {
            if (providerSelected == 'Все провайдеры') {
                $(`.taryf-filter[data-choise="${valueSelected}"]`).fadeIn();
                $(`.taryf-filter[data-choise!="${valueSelected}"]`).fadeOut();
            }
            else {
                $(`.taryf-filter[data-choise="${valueSelected}"]`).fadeIn();
                $(`.taryf-filter[data-choise!="${valueSelected}"]`).fadeOut();
                $(`.taryf-filter[data-provider!="${providerSelected}"]`).hide();
            }

        }
        else {
            $('.taryf-filter').fadeIn();
        }
    });
    $(document).on('change', '#provider_select', function (e) {
        var proselect = this.value;
        var valueSelected = $('#choose').val();
         if (proselect == 'Все провайдеры') {
            $('.taryf-filter').fadeIn();
        }
        else {
            if (valueSelected == 'Все') {
             $(`.taryf-filter[data-provider="${proselect}"]`).fadeIn();
             $(`.taryf-filter[data-provider!="${proselect}"]`).fadeOut();
            }
            else {
              $(`.taryf-filter[data-provider="${proselect}"]`).fadeIn();
              $(`.taryf-filter[data-provider!="${proselect}"]`).fadeOut();
              $(`.taryf-filter[data-choise!="${valueSelected}"]`).hide();
            }
        }
    });

</script>

Answer 1

[Exploding]

Что это за мантроподобные надписи?))
`.taryf-filter[data-choise="${valueSelected}"]`
И разметку бы...
Вот этот веселый паровоз

$(this).parent().parent().parent().parent().parent().fadeIn();

можно заменить на:
$(this).closest(".myClass").fadeIn();
Исключающий селектор, типа:

$(`.taryf-filter[data-provider!="${proselect}"]`).fadeOut();

это не отрицание из сишного синтаксиса, а:

$(`.taryf-filter:not([data-....]`).fadeIn(); //хотел исправить всё, но кол-во ошибок победило
...

Короче... там =, `, $, {} и т.д. надо или заменить или убрать вообще к чертям...
Может просто какой-то плагин возьмете готовый? Их то, особенно слайдеров - пруд пруди

Comments

[vikholodov]

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

[Exploding]

vikholodov, ну так получилось что-то или нет?

[vikholodov]

Exploding, пока не занимался, честно говоря, в выходные сяду

Answer 2

[profesor08]

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