Javascript 缩短冗长的jQuery函数

我对Javascript和jQuery比较陌生，后者是我昨天才开始学习的！所以请温柔一点：）

基本上，我正在构建一个网站，根据下拉框（id=“region”）选择将图像加载到一个div（class=“mapDisplay”）中，并将文本加载到另一个div（class=“blogText”）中“下拉框。所有代码都正常工作，但似乎太长了。对于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.

功能显示地图（区域）{
var selectedRegion=document.getElementById（“region”）.value；
开关（selectedRegion）{
案例“”：
removeCurrentMap（）；
打破
“Nagrand”案：
$（“.blogText”）.fadeOut（“慢”）；
$（“.mapDisplay”）.fadeOut（“慢”，
函数（）{
$（“.mapDisplay”）.empty（）；
$（“.mapDisplay”）。追加（“”）；
$（“.blogText”）.load（“blogText/outland/nagrand.txt”）；
$（“.mapsdisplay”）.fadeIn（“慢”）；
$（“.blogText”）.fadeIn（“慢”）；
});
打破
“Zangarmarsh”案：
$（“.blogText”）.fadeOut（“慢”）；
$（“.mapDisplay”）.fadeOut（“慢”，
函数（）{
$（“.mapDisplay”）.empty（）；
$（“.mapDisplay”）。追加（“”）；
$（“.blogText”）.load（“blogText/outland/zangar.txt”）；
$（“.mapsdisplay”）.fadeIn（“慢”）；
$（“.blogText”）.fadeIn（“慢”）；
});
打破；等等等等等等。

添加另一个函数可以使它看起来更好。请尝试以下操作：

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

函数更新显示（区域）{
$（“.blogText”）.fadeOut（“慢”）；
$（“.mapDisplay”）.fadeOut（“慢速”，函数（）{
$（“.mapDisplay”）.empty（）；
$（“.mapDisplay”）。追加（“”）；
$（“.blogText”）.load（“blogText/outland/“+region+”.txt”）；
$（“.mapsdisplay”）.fadeIn（“慢”）；
$（“.blogText”）.fadeIn（“慢”）；
});
}
功能显示地图（区域）{
var selectedRegion=document.getElementById（“region”）.value；
开关（selectedRegion）{
案例“”：
removeCurrentMap（）；
打破
“Nagrand”案：
更新显示（“nagrand”）；
打破
“Zangarmarsh”案：
更新显示（“zangar”）；
打破
}
}

将一个字符串更改为另一个字符串不需要开关/大小写，可以使用更快、更紧凑的哈希/对象：

values = {Nagrand: 'negrand', Zangarmarsh: 'zangar', etc: ....}

现在提取此函数：

function handleDisplay(arg1){
  $(".blogText").fadeOut("slow");
  $('.mapDisplay').fadeOut('slow', function(){
    $(".mapDisplay").empty().append("<img src='mapImages/outland/" + arg1 + ".jpg' alt='something for valid markup'>");
    $(".blogText").load("blogText/outland/" + arg1 + ".txt");
    $(".mapDisplay, .blogText").fadeIn("slow");
  });
}

如果需要更多值，只需将它们添加到“values”对象中即可

一个建议是，我已将图像的css从javascript移动到css：

您的css文件：

.mapDisplay img {
  height: 100%,
  width: 100%,
  margin-top: 10px
}

---

为WoD准备一些东西，我明白了？让我看看我是否能提供帮助。欢迎使用SO。我建议在上发布完整代码，我恐怕不知道[cr]是！是的，kehrk，很抱歉；）谢谢，伙计-我用了这个想法，它简化了整个过程。哈希/对象过程的确切名称是什么，我可以读懂它？它不是一个过程或任何东西，它只是javascript的基本数据类型

.mapDisplay img {
  height: 100%,
  width: 100%,
  margin-top: 10px
}