Question

在这段代码中，您可以看到一个获取一些数据的JSON请求。我需要一些帮助，以检查将代码最小化并使用FOR（而不是许多IF）进行迭代的某些机会。另外，如果您对微分系统提出任何建议（如何使元素彼此不同），那也很好。

<script type="text/javascript">
    function deleteRow0() {
        $('p.row0').remove();
    }; 
    function deleteRow1() {
        $('p.row1').remove();
    }; 
    function deleteRow2() {
        $('p.row2').remove();
    }; 
    function deleteRow3() {
        $('p.row3').remove();
    }; 
    function deleteRow4() {
        $('p.row4').remove();        
    }; 
</script>
<script type="text/javascript">
    function hello2() {
        //GETTING JSON INFO
        $.getJSON("https://rawgit.com/Varinetz/e6cbadec972e76a340c41a65fcc2a6b3/raw/90191826a3bac2ff0761040ed1d95c59f14eaf26/frontend_test_table.json", function(json) {
            $('#table-cars').css("display", "grid");
            for (let counter = 0; counter < json.length; counter++) {
                $('#table-cars').append("<p class='row" + counter +" main-text'>" + json[counter].title + "<br/>" + "<span class='sub-text'>" + json[counter].description + "</span>" + "</p>"
                + "<p class='row" + counter +" main-text'>" + json[counter].year + "</p>" 
                + "<p id='color" + [counter] + "' class='row" + counter +" main-text'>" + json[counter].color + "</p>" 
                + "<p id='status" + [counter] + "' class='row" + counter +" main-text'>" + json[counter].status + "</p>" 
                + "<p class='row" + counter +" main-text'>" + json[counter].price + " руб." + "</p>" 
                + "<p class='row" + counter +" main-text'>" + "<button class='delete' onclick='deleteRow" + [counter] + "()'>Удалить</button>" + "</p>");
                // COLOR TEXT REPLACEMENT
                if ($('p#color0').text("red")){
                    $('p#color0').text("").append("<img src='red.png'>");
                }    
                if ($('p#color1').text("white")) {
                    $('p#color1').text("").append("<img src='white.png'>");
                }  
                if ($('p#color2').text("black")) {
                    $('p#color2').text("").append("<img src='black.png'>");
                }  
                if ($('p#color3').text("green")) {
                    $('p#color3').text("").append("<img src='green.png'>");
                } 
                if ($('p#color4').text("grey")) {
                    $('p#color4').text("").append("<img src='grey.png'>");
                } 
                // STATUS TEXT REPLACEMENT
                if ($('p#status0').text("pednding")) {
                    $('p#status0').text("").append("Ожидается");
                }    
                if ($('p#status1').text("out_of_stock")) {
                    $('p#status1').text("").append("Нет в наличии");
                }  
                if ($('p#status2').text("in_stock")) {
                    $('p#status2').text("").append("В наличии");
                }  
                if ($('p#status3').text("out_of_stock")) {
                    $('p#status3').text("").append("Нет в наличии");
                } 
                if ($('p#status4').text("in_stock")) {
                    $('p#status4').text("").append("В наличии");
                } 
        }

        });
    }
</script>

我希望这类似于： 1）迭代：对于每个p.row（i）{ 将其与多种颜色进行比较（json.color）}； 2）关于微分系统的任何建议（即FOR部分中的更改，因此它使操作更容易，而不仅仅是简单的p.row（n））。当然，如果可能的话。

Answer 1

首先，您的代码将无法工作，因为您正在设置文本而不是进行比较。其次，您不需要进行比较：只需将img src设置为text。如下所示：

请记住，这是您问题的彩色文本替换部分

for (let i = 0; i < 5 , i ++){
     let color = $("p#color"+i).text() + ".png";
     $("p#color"+i).text("").append("<img src=" + color + ">");
}

您可以使用文本翻译：

function getTranslate(input) {
                                var inputMap = {
                                    "pednding": "Ожидается",
                                    "out_of_stock": "Нет в наличии",
                                    "in_stock": "В наличии"
                                }
                                var defaultCode = input;
                                return inputMap[input] || defaultCode;
                }
                for (let i = 0; i < 5 , i ++){
                    var text = $("p#status"+i).text();
                    $("p#status"+i).text("").append(getTranslate(text));
                }

Answer 2

我不会重写整个脚本，但原则上是这样的：

for (i = 0; i < 5; i++) {
   var colors = ["red", "white", "black", "green", "grey"];
   if ($('p#color' + i).text() == colors[i]){
      $('p#color' + i).text("").append("<img src='" + colors[i] + ".png'>");
   }
}

@Evik Ghazarian在脚本的“文本翻译”部分有一个quality solution。由于这是公认的答案，因此他允许我复制他的解决方案，以使答案结合在一起：

function getTranslate(input) {
   var inputMap = {
      "pednding": "Ожидается",
      "out_of_stock": "Нет в наличии",
      "in_stock": "В наличии"
   }
   var defaultCode = input;
   return inputMap[input] || defaultCode;
}
for (let i = 0; i < 5 , i ++){
   var text = $("p#status"+i).text();
   $("p#status"+i).text("").append(getTranslate(text));
}

动态迭代计数器

@Barmar在下面的注释中提到，通过for设置最大迭代次数的i < 5循环实际上应该被动态重写。我将把它留给OP来决定执行此操作的最佳方法，但是一个很好的例子可能是OP原始i < json.length循环中使用的for之类的东西。

如何摆脱许多中频，使系统成为不同的要素？

2 个答案:

动态迭代计数器