2

私はウェブサイトを作成していて、この JSON ファイルについて助けが必要でした。Webページに表示することができたので、特定の文字を画像に置き換える必要があります. 私は Web プログラミングが初めてで、いくつかのヒントをいただければ幸いです。

これは私の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>タグを使用しました。それは正しいことですか？

4

3 に答える 3

2

コードが機能していて、必要なのはテキストを画像に置き換えることだけである場合は、次のことができます

$.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-12T00:21:02.493 に答える
0

次のようなことができます。

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

これは に置き換えXられ<img src="images/X.png" alt="X" />ます。

于 2013-02-12T00:20:23.397 に答える
0

すべての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-12T00:23:58.193 に答える