0

この配列から1つのオブジェクトを取得し、そのすべての値をdivに出力しようとしています。可能ですか

function Car(company, name, price, details, image, alt){ 
        this.company = company;
        this.name = name;
        this.price = price;
        this.details = details;
        this.image = image;
        this.alt = alt;
    }

var carInformation = [new Car("Company: Ferrari", "Name: Marenello", "Price: $250,000", "Details: Fast. Very Fast.", "images/ferrari.jpg","image of ferrari"),
                          new Car("Company: Dodge", "Name: Viper", "Price: $100,000","Details: Great Acceleration","images/dodge.jpg", "image of viper"),
                          new Car("Company: Ford", "Name: Shelby", "Price: $80,000", "Details: Muscle Car", "images/mustang.jpg", "image of mustang"),
                          new Car("Company: Back To The Future", "Name: Delorean", "Price: $20,000", "Details: Travels through time","images/delorean.jpg", "image of delorean"),
                          new Car("Company: Lamborghini", "Name: Diablo", "Price: $250,000", "Details: Fastest","images/lambo.jpg","image of lamborghini"),
                          new Car("Company: Mercedes Benz", "Name: SLR", "Price: $180,000", "Details: Classy Vehicle.","images/benz.jpg","image of mercedes benz"),
                          new Car("Company: Chevrolet", "Name: Corvette", "Price: $70,000", "Details: Fiberglass body Light Vehicle.","images/vette.jpg","image of corvette"),
                          new Car("Company: Porsche", "Name: Carrera", "Price: $120,000", "Details: Great Handling.","images/porsche.jpg", "image of porsche"),
                          new Car("Company: Audi", "Name: R8", "Price: $110,000", "Details: Fast and Classy.", "images/audi.jpg","image of audi") ];

    for(i=0;i<carInformation.length;i++) {
    $('#container').append('<div class="product"><li><a href="#" ><img src="' + carInformation[i].image + '" alt="' + carInformation[i].alt +'" ></img></a></li><div class="description"><p class="carCompany">'+ carInformation[i].company +'</p><p class="carName">'+ carInformation[i].name +'</p><p class="carPrice">'+ carInformation[i].price +'</p><p class="carDetails">'+ carInformation[i].details +'</p></div></div>');
    $('#productPage').append('<div id="carInfo">' + carInformation[i] + '</div>');

        }

'#container'行は機能します。各プロパティを記述せずにすべての値を出力することは可能ですか？'#productPage'で試したように？オブジェクトObjectを返します。なぜ？console.log（carInformation [0]）;と書くとき オブジェクト内のすべての値を確認できます。

4

6 に答える 6

2

carInformation[i]はオブジェクトです。あなたができる最善のことは、あなたの車にプロトタイプメソッドを追加して、それがすべてのプロパティをこぼし、それからそれがdivの横にレンダリングされるようにすることです。

function view(){
return "Company " + this.company + ",Name   " + this.Name + ", Price " + this.price ;
}


Car.prototype.view = view;

//and then use it inside div
 $('#productPage').append('<div id="carInfo">' + carInformation[i].view + '</div>');

プレーンな文字列ではなくHTMLをレンダリングすることで、車の情報の表示方法を制御できます。

于 2012-06-19T11:17:26.027 に答える
2

これを試して、魔法を見てください：

alert(JSON.stringify(carInformation[0]));
于 2012-06-19T11:22:38.740 に答える
1

変数をdivに書き込むためにいくつかの関数を作成する必要があります。これらをのプロトタイプに追加できますCar。

function Car(company, name, price, details, image, alt){ 
    this.company = company;
    this.name = name;
    this.price = price;
    this.details = details;
    this.image = image;
    this.alt = alt;
    }

Car.prototype.product = function() {
    return '<li><a href="#"><img src="'+this.image +'"alt="'+this.alt+'"></img></a></li>';
    };

Car.prototype.description = function() {
    return '<p class="carCompany">'+this.company+'</p><p class="carName">'+this.name +'</p><p class="carPrice">'+ this.price +'</p><p class="carDetails">'+ this.details +'</p>';
    };

次に、オブジェクトの関数を呼び出してdivを入力できます。

 for(i=0;i<carInformation.length;i++) {
    $('#container').append('<div class="product">'+carInformation[i].product()+'<div class="description">' + carInformation[i].description() + '</div></div>');
    }
于 2012-06-19T11:39:56.540 に答える
0

手始めに：

var car = new Car( ... );
var $ul = $("<ul></ul>");
for(var key in car) {
  $ul.append("<li>" + car[key] + "</li>");
}
$('#container').append($ul);
于 2012-06-19T11:24:02.747 に答える
0

オブジェクトを反復処理することですべてのプロパティを取得できます。他の場合にもオブジェクトを印刷すると思いますが、これはそのための良い解決策だと思います-ミニテンプレート:)

Car.prototype.view = function( template, separator ) {
  var arr=[], template = template || "<%name%>: <%value%>",
  separator = separator || "\n";
  foreach( var i in this ) { 
    if( this.hasOwnProperty( i ) ){ 

        arr[arr.length] = template.replace("<%name%>",i).replace("<%value%>" , this[i]);
    }

  } 
  return arr.join(separator);
};


// that will be print list of names each property in car :)
console.log( "<ul>" + yourCar.view( "<li><%name%><li>") +"</ul>") ;

これは、目的に合わせて拡張できる単純な例です。（一部のプロパティのゲッター。例：-imageプロパティ、getterは一度にimageタグを返す場合があります:)）

私はこれをテストしていません、コンマか何かが欠けているかもしれません。

楽しみ！

于 2012-06-19T11:33:19.507 に答える
0

これらのどれよりもはるかに簡単な解決策は、単に次のようなことをすることです。

for(const [key, value] of Object.entries(car)) {
     //code, key being the property name, and value being the value of said key
}
于 2020-11-20T19:17:44.293 に答える