javascript - 缩短冗长的jQuery函数

我对Javascript和jQuery比较陌生，后者是我昨天才开始学习的！所以请轻柔:)

基本上，我正在建立一个网站，该网站根据下拉框（id =“ region”）的选择将图像加载到div（class =“ mapDisplay”）中并将文本加载到另一个div（class =“ blogText）中。 “区域”下拉框中的“ onchange”所有代码均能正常运行，但似乎太长了，对于switch语句的每种情况，将图像加载到“ mapDisplay”元素中的代码都是相同的-唯一改变的是是“ src”。有人对如何压缩它有任何建议吗？

这是两种情况的示例...

function displayMap(region){
var selectedRegion = document.getElementById("region").value;
switch(selectedRegion){
        case "":
            removeCurrentMap();
        break;
        case "Nagrand":
            $(".blogText").fadeOut("slow");
            $(".mapDisplay").fadeOut("slow",
            function(){
                $(".mapDisplay").empty();
                $(".mapDisplay").append("<img src='mapImages/outland/nagrand.jpg' height='100%' width='100%' style='margin-top:10px'>");
                $(".blogText").load("blogText/outland/nagrand.txt");
                $(".mapDisplay").fadeIn("slow");
                $(".blogText").fadeIn("slow");
            });
        break;
        case "Zangarmarsh":
            $(".blogText").fadeOut("slow");
            $(".mapDisplay").fadeOut("slow",
            function(){
                $(".mapDisplay").empty();
                $(".mapDisplay").append("<img src='mapImages/outland/zangar.jpg' height='100%' width='100%' style='margin-top:10px'>");
                $(".blogText").load("blogText/outland/zangar.txt");
                $(".mapDisplay").fadeIn("slow");
                $(".blogText").fadeIn("slow");
            });
        break; .....etc. etc. etc.

最佳答案

添加另一个功能可以使其看起来更好一些。尝试这个：

function updateDisplay(region) {
    $(".blogText").fadeOut("slow");
    $(".mapDisplay").fadeOut("slow", function () {
        $(".mapDisplay").empty();
        $(".mapDisplay").append("<img src='mapImages/outland/" + region + ".jpg' height='100%' width='100%' style='margin-top:10px'>");
        $(".blogText").load("blogText/outland/" + region + ".txt");
        $(".mapDisplay").fadeIn("slow");
        $(".blogText").fadeIn("slow");
    });
}

function displayMap(region) {
    var selectedRegion = document.getElementById("region").value;
    switch (selectedRegion) {
        case "":
            removeCurrentMap();
            break;
        case "Nagrand":
            updateDisplay("nagrand");
            break;
        case "Zangarmarsh":
            updateDisplay("zangar");
            break;
    }
}