Как правильно написать такой простой скрипт?

Question

[Дима Долготер]

Всем привет. Есть несколько элементов .form-row и для каждого мне приходится писать такой скрипт

$(".form-row:eq(13) .select-change-item option.Lacquered").show();
            $(".form-row:eq(13)   .select-change-item option:not(.Lacquered)").hide();
            $(".form-row:eq(13)  .select-change").change(function() {
                if ($(".form-row:eq(13) .select-change").val() == "Lacquered") {
                    $(".form-row:eq(13) .select-change-item option.Lacquered").show();
                    $(".form-row:eq(13) .select-change-item option:not(.Lacquered)").hide();
                } else if ($(".form-row:eq(13) .select-change").val() == "Acrylic") {
                    $(".form-row:eq(13) .select-change-item option.Acrylic").show();
                    $(".form-row:eq(13) .select-change-item option:not(.Acrylic)").hide();
                } else if ($(".form-row:eq(13) .select-change").val() == "Veneer") {
                    $(".form-row:eq(13) .select-change-item option.Veneer").show();
                    $(".form-row:eq(13) .select-change-item option:not(.Veneer)").hide();
                } else if ($(".form-row:eq(13) .select-change").val() == "Laminate") {
                    $(".form-row:eq(13) .select-change-item option.Laminate").show();
                    $(".form-row:eq(13) .select-change-item option:not(.Laminate)").hide();
                } else if ($(".form-row:eq(13) .select-change").val() == "Thermofused") {
                    $(".form-row:eq(13) .select-change-item option.Thermofused").show();
                    $(".form-row:eq(13) .select-change-item option:not(.Thermofused)").hide();
                }
            });

Как упростить? Пробовал each но не помогло

Answer 1

[Роман]

const list = ["Lacquered", "Acrylic", "Veneer", "Laminate", "Thermofused"];
const row = 13;
const rowStr = ".from-row:eq(" + row + ")";
$(rowStr + " .select-change-item option.Lacquered").show();
    $(rowStr + " .select-change-item option:not(.Lacquered)").hide();
    $(rowStr + " .select-change").change(function() {
        list.forEach(item=>{
            if ($(rowStr + " .select-change").val() == item) {
                $(rowStr + " .select-change-item option."+item).show();
                $(rowStr + " .select-change-item option:not(."+item+")").hide();
            }
        });
    });

Comments

[Дима Долготер]

я имел ввиду как избавиться от .form-row:eq(13) . просто мне приходится вываливать очень много повторений

[Роман]

SpiderPigAndCat, тут не подскажу.

Поясните зачем от него избавлятся, вроде бы все повторения которые были у вас в коде я удачно свернул в цикл .forEach

[Дима Долготер]

Роман, дело в том, что это один из 14 блоков. у меня на страничке их 14 штук таких не больших, но вмсете - огромных кусков. и новые строки могут добавляться, следственно и такие блоки скриптов. Дело не в количестве строк этого кода, а в том, чтоб заменить .form-row:eq(13) на типа this. просто у меня есть все .form-row:eq(от 0 до 13)

[Роман]

SpiderPigAndCat, засунул
.form-row:eq(13)
в отдельную строку с возможностью отдельно изменять цифру 13.
Если это не то что Вам надо, распишите суть по подробнее пожалуйста.

[Роман]

SpiderPigAndCat, к сожалению про замену на this... не подскажу, но вариант со строкой вполне рабочий, хотя и не так изящен.
Возможно ктонибудь еще сможет дать более правильный ответ.