简化/优雅此代码？

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

Answer 2

为了简单起见，我会将点击的按钮的 ID 更改为一个词（温度、负载、价格、关税）。您必须对反动 ids/classes 进行一些重命名，但对我来说看起来更干净了。我还颠倒了一些你的命名以保持一致。

您可以切换它以匹配您的风格，这让我很困扰，因为有 $("#"+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();
        }
});

Answer 3

如果您不想依赖 ID 名称匹配其他元素名称，您可以使用对象作为映射来指定操作。

//using a map lets you easily add or remove cases without duplicating code, and doesn't require you to use standardized names for your elements and events. 
    var action_map = {temperature_event:{show:"#poplist_temp",
                                         hide:".temperature-params",
                                         remove:"#temperature_event"
                                        },
                      load_event:{show:"#poplist_load",
                                  hide:".load-params",
                                  remove:"#load_event",
                                 },
                      price_event:{show:"#poplist_price",
                                   hide:".price-params",
                                   remove:"#price_event",
                                  },
                      duty_event:{show:"#poplist_duty",
                                  hide:".duty-params",
                                  remove:"#duty_event"
                                 },
                      default_event:{show:"#poplist_program",
                                     hide:".program-params",
                                     remove:"#duty_event",
                                    }
                     };

    $("#btn_remove_event_type").click(function() {
        var selectedId = $(".selected-type").attr("id");
        if (!action_map[selectedId]) 
            selectedId = "default_event";

            $(action_map[selectedId].show).show();
            $(action_map[selectedId].hide).hide();
            $(action_map[selectedId].remove).remove();
        }
    });

Answer 4

就我个人而言，我能看到的最干净、最可配置的方法是使用映射和方法循环。这是通用的，因为不同的映射可以有不同的方法。你甚至可以进一步扩展它，这样你就可以有一个方法来为你构建映射......即 addNewType([{methodName:selector}, etc..]).

 var configuration = { 
        temperature_event: {
            show: "#poplist_temp",
            hide: ".temperature-params",
            remove: "#temperature_event"
        },
        load_event: {
            show: "#poplist_load",
            hide: ".load-params",
            remove: "#load_event" 
        }
        // etc etc.
    };

    $("#btn_remove_event_type").click(function() {
        var fn, selector, typeConfig = $(".selected-type").attr("id");
        for (fn in typeConfig) 
            $(typeConfig[fn])[fn]();
        });

    });

Answer 5

我最终将我的类更改为 ID 并重新排序，所以我最终得到了这个不需要任何 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();

});

简化/优雅此代码？

Simplify / elegantize this code?

javascript

function

simplify