JQuery JSON替換循環中的字符

我正在創建一個網站，並且需要一些關於此JSON文件的幫助。我已經設法讓它顯示在網頁上，並需要用圖像替換某些字符。我是新來的網絡編程，並會欣賞一些提示。JQuery 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>標記。這是正確的事情嗎？

來源

2013-02-12 Andy

我沒有看到試圖用圖像替換o，1，a的代碼。您正確地在數組中的每個元素（逗號）之間插入換行符。你的問題應該總是說「我的程序應該做A，但它做B」。你的代碼的實際問題是什麼？ – 2013-02-12 00:16:25

http://jsfiddle.net/4RkLc/ – 2013-02-12 00:20:28

你可以做這樣的事情：

$.getJSON('hall.json', function(data) { 
    var $layout = $('.layout'); // Cache it 
    var seats = data.seats; 

    for (var i = 0; i < seats.length; i++) { 
     var seat = seats[i]; 

     for (var j = 0; j < seat.length; j++) { 
      var char = seat.charAt(j); 

      $('<img />', { 
       src: 'images/' + char + '.png', 
       alt: char 
      }).appendTo($layout); 
     } 

     $layout.append('<br />'); 
    } 
});

這將與<img src="images/X.png" alt="X" />取代X。

來源

2013-02-12 00:20:23 Blender

如果您的代碼工作，你需要的唯一一件事就是更換圖像的文字，你可以做以下

$.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);} 
});

來源

2013-02-12 00:21:02

你應該把每一個JSON元素的數組和不更換,與<br>要添加它的每個循環

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

var currentLength = d.seats[i].length; 
for(var j = 0; j < currentLength; j++) 
{ 
     if(d.seats[i][j] == '0') 
     // do something 
     else 
     // do something else 
} 

     $('.layout').append(d.seats[i] + vr);} 
    } 
});

你應該閱讀更多關於JSON，陣列&的JavaScript

我希望這可以幫助:)

來源

2013-02-12 00:23:58 Sedz

JQuery JSON替換循環中的字符

回答

相關問題