简化/简化这段代码？

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

最后，我将类更改为I并重新排序，因此我最终得到了不需要任何if语句的解决方案。

$("#btn_remove_event_type").click(function() {

    var selectedId = $(".selected-type").attr("id").split("_");
    $("#" + selectedId[0] + "_pop").show();
    $("#" + selectedId[0] + "_params").hide();
    $("#" + selectedId[0] + "_event").remove();

});

Answer 2

就像这样：

$("#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();
});

Answer 3

为了简单起见，我会将点击按钮的id更改为一个单词(温度、负载、价格、关税)。您将不得不对您的反动ids/类进行一些重命名，但在我看来就更清晰了。我还翻了一些你的名字，以保持一致。

您可以切换它来匹配您的风格，它只是困扰我的选择，如$("#"+id+"-params").hide()；

$("#btn_remove_event_type").click(function() {
        var selectedId = $(".selected-type").attr("id");
        var nonDefault = ["temperature","load","price","duty"];
        if(nonDefault.indexOf(selectedId) > -1){
            $("#poplist_"+selectedId).show();
            $(".params-"+selectedId).hide();
            $("#event_"+selectedId).remove();          
        } else {
            $("#poplist_program").show();
            $(".params-program").hide();
            $("#event_program").remove();
        }
});