Как я могу оптимизировать следующую логику JQuery - PullRequest
Новая
       53

Как я могу оптимизировать следующую логику JQuery

0 голосов
/ 06 декабря 2018

У меня следующая логика jquery.я хочу сделать это более кратким или оптимизировать это.используя массивы. 

function toggleStudyFields(service_type) {
  if (service_type == "Study") {
    $("#study_or_migrate").addClass("hidden");
    $("#study-fields").removeClass("hidden");
    $("#fields-except-visa").removeClass("hidden");
    $("#visa-fields").addClass("hidden");
    $("#coaching-fields").addClass("hidden");
  } else if (service_type == "Visa") {
    $("#study_or_migrate").addClass("hidden");
    $("#fields-except-visa").addClass("hidden");
    $("#visa-fields").removeClass("hidden");
    $("#study-fields").addClass("hidden");
    $("#coaching-fields").addClass("hidden");
  } else if (service_type == "Coaching") {
    $("#study_or_migrate").addClass("hidden");
    $("#fields-except-visa").addClass("hidden");
    $("#visa-fields").addClass("hidden");
    $("#study-fields").addClass("hidden");
    $("#coaching-fields").removeClass("hidden");
  } else if (service_type == "Invest") {
    $("#study_or_migrate").addClass("hidden");
    $("#fields-except-visa").removeClass("hidden");
    $("#visa-fields").addClass("hidden");
    $("#study-fields").addClass("hidden");
    $("#coaching-fields").addClass("hidden");
  } else {
    $("#study_or_migrate").removeClass("hidden");
    $("#fields-except-visa").removeClass("hidden");
    $("#visa-fields").addClass("hidden");
    $("#study-fields").addClass("hidden");
    $("#coaching-fields").addClass("hidden");
  }
}

Я не знаю, как оптимизировать логику.Может ли кто-нибудь помочь мне с этим.

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

попробуйте это.

function toggleStudyFields(service_type) {
        $("#study_or_migrate").addClass("hidden");
        $("#study-fields").addClass("hidden");
        $("#fields-except-visa").addClass("hidden");
        $("#visa-fields").addClass("hidden");
        $("#coaching-fields").addClass("hidden");

        switch (service_type) {
            case "Study":
                $("#study-fields").removeClass("hidden");
                $("#fields-except-visa").removeClass("hidden");
                break;
            case "Visa":
                $("#visa-fields").removeClass("hidden");
                break;
            case "Coaching":
                $("#coaching-fields").removeClass("hidden");
                break;
            case "Invest":
                $("#fields-except-visa").removeClass("hidden");
                break;
            default:
                $("#study_or_migrate").removeClass("hidden");
                $("#fields-except-visa").removeClass("hidden");
                break;
        }
    }
0 голосов
/ 06 декабря 2018

Поскольку addClass встречается гораздо чаще, чем removeClass, я бы предложил создать объект с индексом service_type, значения которого являются селекторами, указывающими, какие классы следует удалить.Добавьте hidden ко всем элементам и remove их из элементов, заданных строкой селектора в объекте: 

const removeHiddenFrom = {
  Study: '#study-fields, #fields-except-visa',
  Visa: '#visa-fields',
  Coaching: '#coaching-fields',
  Invest: '#fields-except-visa',
}
const defaultRemoveHiddenFrom = '#study-or-migrate, #fields-except-visa';

function toggleStudyFields(service_type) {
  $('#study-or-migrate, #study-fields, #fields-except-visa, #visa-fields, #coaching-fields')
    .addClass('hidden');
  if (removeHiddenFrom[service_type]) {
    $(removeHiddenFrom[service_type]).removeClass('hidden');
  } else {
    $(defaultRemoveHiddenFrom).removeClass('hidden');
  }
}
...