javascript - 简化/优雅此代码？

Question

这里有一些代码可以正常工作，但我认为可以简化/缩短。它基本上是点击一个列表项，获取它的 ID，然后根据 ID 显示/隐藏/删除元素。

关于如何使用函数或循环来简化它的建议？

$("#btn_remove_event_type").click(function() {
    var selectedId = $(".selected-type").attr("id");
    if (selectedId == "temperature_event") {
        $("#poplist_temp").show();
        $(".temperature-params").hide();
        $("#temperature_event").remove();
    } else if (selectedId == "load_event") {
        $("#poplist_load").show();
        $(".load-params").hide();
        $("#load_event").remove();
    } else if (selectedId == "price_event") {
        $("#poplist_price").show();
        $(".price-params").hide();
        $("#price_event").remove();
    } else if (selectedId == "duty_event") {
        $("#poplist_duty").show();
        $(".duty-params").hide();
        $("#duty_event").remove();
    } else {
        $("#poplist_program").show();
        $(".program-params").hide();
        $("#program_event").remove();
    }
});

Answer 1

像这样:

$("#btn_remove_event_type").click(function() {
    var selectedId = $(".selected-type").attr("id");
    switch(selectedId){
        case "temperature_event":
        $("#poplist_temp").show();
        $(".temperature-params").hide();
        $("#temperature_event").remove();
        break;

        case "load_event":
        $("#poplist_load").show();
        $(".load-params").hide();
        $("#load_event").remove();
        break;

        case "price_event":
        $("#poplist_price").show();
        $(".price-params").hide();
        $("#price_event").remove();
        break;

        case "duty_event"):
        $("#poplist_duty").show();
        $(".duty-params").hide();
        $("#duty_event").remove();
        break;

        default:
        $("#poplist_program").show();
        $(".program-params").hide();
        $("#program_event").remove();
    }
});

或者更好:

$("#btn_remove_event_type").click(function() {
    // Get id and split on "_"
    var selectedId = $(".selected-type").attr("id").split("_");
    // Set array of accepted input
    var options = ["temperature","load","price","duty"];
    // Handle default
    if(options.indexOf(selectedId[0]) == -1){
       selectedId = ["program"];
    }

    $("#poplist_" + selectedId[0]).show();
    $("."+selectedId[0] + "-params").hide();
    $("#"+selectedId[0] + "_event").remove();
});