JQuery JSON 替换循环中的字符

Question

我正在创建一个网站，需要一些有关此 JSON 文件的帮助。 我已经设法让它显示在网页上，并且需要用图像替换某些字符。我是网络编程新手，希望得到一些提示。

这是我的 JQuery 代码:

$.ajax({
  url:'hall.json',dataType:'json',
  success: function(d) {
    for (var i=0;i<d.seats.length;i++){
    vr = "</br>"
        $('.layout').append(d.seats[i] + vr);}
    }
});

JSON文件中的代码如下:

{"seats":["00000000000000000011111111111111000000000000000000","0000000000000001111111111111111aaa0000000000000000","00000000000000aa111111111111111aaaaa00000000000000","00000000000001111111111111111111111111000000000000","000000000aa00aaaaaaaaaaaaaaaaaaaaaa1100aa000000000","00000001111001111111111111111111111100111100000000","00000aaaaaa0011aaaaaaaaa11111111aaa1100aaaaaa00000","00001111111001111111111111111111111100111111100000","000aaaaaaa110011111111111111111111110011aaaaaaa000","00111111111100111111111111111111111001111111111000","00aaaaa1111110011111111111111111111001111aaaaaaa00","11111111111100111111111111111111111001111111111110","0aaaaaaaaaaaa001111111111111111111100aaaaaaaaaaaa0","01111111111110011111111111111111110011111111111100","00000000000000001111111111111111110000000000000000","01111111111111001111111111111111100111111111111100","01111111111111001111111111111111110011111111111110","01111111111111001111111111111111100111111111111100","00a11111111111100111111111111111100111111111111a00","00111111111111100111111111111111001111111111111000","00011111111111110011111111111111001111111111111000","00111111111111100111111111111111001111111111111000","00011111111111110011111111111111001111111111111000","00011111111111110011111111111110011111111111110000","0000000111a111111001111a1111a110011111111110000000","00000000111111110011111111111110011111111000000000","00000000001111111001111111111110011111110000000000","00000000000000111001111111111100111000000000000000"],"rows":["DD","CC","BB","AA","Z","Y","W","V","U","T","S","R","Q","P","N","M","L","K","J","H","G","F","E","DC","B","A"],"seatPrice":["                  00000000000000                  ","               0000000000000000000                ","              0000000000000000000000              ","             0000000000000000000000000            ","         00  000000000000000000000000  00         ","       0000  00000000000000000000000  0000        ","     000000  000000000000000000000000  000000     ","    0000000  00000000000000000000000  0000000     ","   000000000  0000000000000000000000  000000000   ","  0000000000  000000000000000000000  0000000000   ","  00000000000  00000000000000000000  00000000000  ","000000000000  000000000000000000000  000000000000 "," 000000000000  00000000000000000000  000000000000 "," 000000000000  0000000000000000000  000000000000  ","                000000000000000000                "," 0000000000000  00000000000000000  0000000000000  "," 0000000000000  000000000000000000  0000000000000 "," 0000000000000  00000000000000000  0000000000000  ","  0000000000000  0000000000000000  0000000000000  ","  0000000000000  000000000000000  0000000000000   ","   0000000000000  00000000000000  0000000000000   ","  0000000000000  000000000000000  0000000000000   ","   0000000000000  00000000000000  0000000000000   ","   0000000000000  0011111111100  0000000000000    ","       0000000000  111111111111  0000000000       ","        00000000  1111111111111  00000000         ","          0000000  111111111111  0000000          ","              000  00000000000  000               "],"priceLookup":[10,20]}

我正在尝试用特定图像替换“0”，“1”和“a”也是如此 另外，我不确定我是否做得正确，但为了用新行替换逗号，我使用了 <br>标签。这是正确的做法吗？

Answer 1

如果您的代码正常工作，并且您唯一需要的是将文本替换为图像，您可以执行以下操作

$.ajax({
  url:'hall.json',
  dataType:'json',
  success: function(d) {
    var html = "";
    for (var i=0;i<d.seats.length;i++){
        var seat = d.seats[i];
        // Could use a single replace instead of three different calls but I
        // don't know what you need for each image, so optimization's up to you
        seat = seat.replace(/1/g, "<img src='1.png' />");
        seat = seat.replace(/a/g, "<img src='a.png' />");
        seat = seat.replace(/0/g, "<img src='0.png' />");
        html += seat + "< br />";
    }
    $('.layout').append(html);}
});