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 /类进行一些重命名，但对我来说看起来更干净。我还翻了一些你的命名以保持一致。

你可以切换它以匹配你的风格，它只是困扰我有选择器，如$（＆＃34;＃＆＃34; + id +＆＃34; -params＆＃34;）。hide（）; < / p>

$("#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并重新排序，所以我最终得到了这个不需要任何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 4

如果您不想依赖与其他元素名称匹配的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 5

就个人而言，我能看到的最干净，最可配置的方法是使用地图和循环方法。这是通用的，因为不同的映射可以有不同的方法。你甚至可以进一步扩展它，这样你就可以有一个为你构造映射的方法..即addNewType（[{methodName：selector}等等。））。

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

    });

简化/优化此代码？

5 个答案: