Question

我对Javascript和jQuery相对较新，后者我只是在昨天才开始学习！所以请温柔：）

基本上，我正在建立一个网站，将图像加载到div（class =“mapDisplay”），并根据下拉框（id =“region”）选择将文本转换为另一个div（class =“blogText）。函数在“region”下拉框中被称为“onchange”。所有代码都正常运行，但它看起来过长。将图像加载到'mapDisplay'元素的代码对于switch语句的每种情况都是相同的 - 只有改变的是'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.

Answer 1

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

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

Answer 2

你不需要一个开关/大小写来改变另一个字符串，使用更快更紧凑的散列/对象：

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

像这样使用：

if (selectedRegion == '') removeCurrentMap();
else handleDisplay(values[selectedRegion]);

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

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

你的css文件：

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

缩短冗长的jQuery函数

2 个答案: