Question

我遇到了课堂问题。用户在输入字段中输入三个不同的内容。我们使用Materialize和我们自己的site.js文件来获取JavaScript和jQuery，还使用Materialize CSS和JavaScript文件以及jQuery脚本。我可以成功输入啤酒，种类和价格;并且该站点将它存储在一个数组和所有内容中。但是当我尝试通过jQuery创建带有对象的啤酒时，啤酒显示为未定义。

$('select').material_select();

var beers = [];
var Beer = function(alcohol, style, price) {

  this.alcohol = alcohol;
  this.style = style;
  this.price = price;

};


$("#btnCreateBeer").on("click", function() {

  var alcohol = $("#txtName").val();

  var style = $("#dboStyle").val();

  var price = $("#txtPrice").val();

  beers.push(new Beer(alcohol, style, price));

  console.log(beers);

  $("#tblBeers").append('<tr>' +
    '<td>' + beers.alcohol + '</td>' +
    '<td>' + beers.style + '</td>' +
    '<td>' + beers.price + '</td>' +
    '</tr>');
});

<div class="container">
  <div class="row">
    <div class="col s4">

      <div class="input-field">
        <input placeholder="Name" id="txtName" type="text">
        <label for="txtName">Name</label>
      </div>

      <div class="input-field">
        <select id="dboStyle">
                            <option value="" disabled selected>Choose your option</option>
                            <option value="Ale">Ale</option>
                            <option value="Lager">Lager</option>
                            <option value="Stout">Stout</option>
                            <option value="Pilsner">Pilsner</option>
                            <option value="Porter">Porter</option>
                            <option value="Wheat">Wheat</option>
                        </select>
        <label>Style</label>
      </div>

      <div class="input-field">
        <input placeholder="Price" id="txtPrice" type="text">
        <label for="txtPrice">Price</label>
      </div>

      <div class="btn" id="btnCreateBeer">Create</div>

    </div>
    <div class="col s8">

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Style</th>
            <th>Price</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="tblBeers"></tbody>
      </table>

    </div>
  </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="js/site.js"></script>

Answer 1

问题是你像对象一样访问数组。查看您的事件处理程序，在每次单击时，您将啤酒存储在数组中并将其添加为表行。我已经修改了下面的事件处理程序，将当前的啤酒存储在一个数组中并附加到表格中。

$("#btnCreateBeer").on("click", function() { 

  var alcohol = $("#txtName").val();

  var style = $("#dboStyle").val();

  var price = $("#txtPrice").val();

  var beer = new Beer(alcohol, style, price);
  beers.push(beer);

  console.log(beers);

  $("#tblBeers").append('<tr>' +
    '<td>' + beer.alcohol + '</td>' +
    '<td>' + beer.style + '</td>' +
    '<td>' + beer.price + '</td>' +
    '</tr>');
});

Answer 2

这是因为beers是array，您正试图访问object上的array属性。您需要append新创建的object。试试这个：

var newBeer = new Beer(alcohol, style, price);
beers.push(newBeer);

$("#tblBeers").append('<tr>' +
'<td>' + newBeer.alcohol + '</td>' +
'<td>' + newBeer.style + '</td>' +
'<td>' + newBeer.price + '</td>' +
'</tr>');

Answer 3

将 tr 替换为此代码

 $("#btnCreateBeer").on("click", function() {

  var alcohol = $("#txtName").val();
  console.log(alcohol);   // test alcohol
  var style = $("#dboStyle").val(); 
  console.log(style);   // test style
  var price = $("#txtPrice").val();
  console.log(price);   // test price
  beers.push(new Beer(alcohol, style, price));

  //**** after push you can find same value

  console.log(alcohol);   // test alcohol
  console.log(style);   // test style
  console.log(price);   // test price

  $("#tblBeers").append('<tr>' +
    '<td>' + alcohol + '</td>' +
    '<td>' + style + '</td>' +
    '<td>' + price + '</td>' +
    '</tr>');
});

附加显示“未定义”

3 个答案: