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

我如何优化以下jquery逻辑

2 个答案: