如何优化以下 jquery 逻辑答案

【问题标题】：how can i optimise the following jquery logic如何优化以下 jquery 逻辑
【发布时间】：2019-05-07 20:50:06
【问题描述】：

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

我不知道如何优化逻辑。有人可以帮我解决这个问题吗？

【问题讨论】：

除非你使用一些古怪的类/ID逻辑，否则真的没办法……

标签： jquery optimization readable

【解决方案1】：

试试这个。

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

【讨论】：

【解决方案2】：

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

【讨论】：