jquery - 我怎样才能优化以下jquery逻辑

Question

我有以下 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");
  }
}

我不知道如何优化逻辑。有人可以帮我弄这个吗。

Answer 1

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

Answer 2

尝试这个。

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