Question

我无法在jQuery生成的表中动态更新值。

我在计算相邻<td>内容的值旁边插入了一个按钮，意图.click(function(){ prompt("...","...")}不仅会更新感兴趣的值（小时，avgCustomers，avgPurchase），但也要重新计算依赖<td>。

表的内容是在对象构造函数的$(document).ready上计算的，使用数组作为输入值（参见Shops.js @ http://github.com/jacobshillman/Week2A2.git和/或以下）。在git中，＆＃39; index.html＆＃39;是感兴趣的页面。

点击事件会更新显示的值，但我还无法弄清楚如何根据新值重新计算表格的其余部分。

  //Donut Shop Constructor
  function Shop (loc, hours, minCust, maxCust, avgDonCust, avgCust, donHr, donDay) {
    this.loc = loc;
    this.hours = hours;
    console.log(this.loc + ", Hours: " + this.hours);
    this.minCust = minCust;
    this.maxCust = maxCust;
    this.avgDonCust = avgDonCust;

    //Random sample of average customers per hour:
    this.avgCust = getCustpHr(this.hours, this.minCust, this.maxCust);
    console.log(this.loc + ", Customers per hour: " + this.avgCust);

    //Donuts to bake per hour:
    this.donHr = getDon(this.avgCust, this.avgDonCust)
    console.log(this.loc + ", Donuts to bake per hour: " + this.donHr);

    //Donuts to bake per day:
    this.donDay = getSum (this.donHr)
    console.log(this.loc + ", Donuts to bake per day: " + this.donDay);

    };

//Donut Shops declaration:
  var Shops = [5];

  Shops[0] = new Shop("Downtown", 8, 8, 43, 4.5);

  Shops[1] = new Shop("Capitol Hill", 24, 4, 37, 2);

  Shops[2] = new Shop("South Lake Union", 10, 9, 23, 6.33);

  Shops[3] = new Shop("Wedgewood", 7, 2, 28, 1.25);

  Shops[4] = new Shop("Ballard", 10, 8, 58, 3.75);

//Populate index.html with Donut shops stats:
  $(document).ready(function(){
    $.each(Shops, function(){
      $row = $('<tr></tr>');
      $('#shopGrid tbody').append($row);
      $row.append($('<td><ul>' + this.loc + '<li>Hours Open: ' + 
                                            '<span id="Hour">' + this.hours + '</span>'
                                              + '<input type="button" class="edit" value="EDIT">' + '</li>'
                                          + '<li>Average Purchase:' + 
                                            '<span id="Purch">' + this.avgDonCust + '</span>'
                                              + '<input type="button" class="edit" value="EDIT">' + '</li>'
                                          + '<li>Store Traffic:' + 
                                            '<span id="Traffic">' + this.minCust + '-' + this.maxCust + '</span>'
                                              + '<input type="button" class="edit" value="EDIT">' + '</li></ul>'))
//.slice() is inserted to control formatting:
      $row.append($('<td>' + this.avgCust.slice(0,8) + '<br>'  
                           + this.avgCust.slice(8,16) + '<br>' 
                           + this.avgCust.slice(16) +'</td>'));
      $row.append($('<td>' + this.donHr.slice(0,8) + '<br>'
                           + this.donHr.slice(8,16) + '<br>'
                           + this.donHr.slice(16) + '</td>'));
      $row.append($('<td>' + this.donDay + '</td>'));

  });

//Shop stats EDIT buttons:
//If else for EDIT button fX:
  $(".edit").click(function(){
    var test = $('#Hour').text();
    console.log(test);

    var newHours = prompt("Enter new number between 0 and 24", "New Hours");
    if (newHours <= 24) {
        $('#Hour').text(newHours);
        test = newHours
      }else{
        alert('Must be a number between 0 to 24.')
      }
    console.log(test);
    console.log(document.getElementById('Hour'));
});


/*
  $(".edit").click(function(){
    if ($('#Hour')) {
      var newHours = prompt("Enter new number between 0 and 24", "New Hours");
      if (newHours <= 24) {
        $('#Hour').value(newHours);
      }else{
        alert('Must be a number between 0 to 24.')
      }
    }else if ($('#Purch')) {
      var newVal = prompt("Enter new value:", "Enter number");
        $(this.avgDonCust).val(newVal);
    }else if ($('#Traffic')) {
      var newVal = prompt("Enter first value:", "Enter number");
      $(this.minCust).value(newVal)
      var val2 = prompt("Enter second value", "Enter number");
      $(this.maxCust).value(Val2);
      };
    });
*/

/*
  //Switch for EDIT buttons fX:
  $(".edit").click(function (){
    switch (n){
      case $('#Hour')
        var newHours = prompt("Enter new number between 0 and 24", "New Hours");
        if newHours <= 24 {
          $(this.hours).val(newHours);
        }else{
          alert('Must be a number between 0 to 24.');
        break;
      case $('Purch'):
        var newVal = prompt("Enter new value:", "Enter number");
        $(this.avgDonCust).val(newVal);
      case $('#Traffic'):
        var newVal = prompt("Enter first value:", "Enter number");
        $(this.minCust).val(newVal);
        function() {
          var val2 = prompt("Enter second value", "Enter number");
          $(this.maxCust).val(Val2);
        };
        break;
    }
*/
});

在console.log()中注释掉的代码是我尝试进行故障排除并让表格重新计算的。

我能说的最好的是我需要更新2-D阵列商店中的相应值 - Shops[this][[1]以更新＆＃34;营业时间：＆＃34;任何给定的商店，然后再次触发计算，而不重新加载页面。

我试图在早期（失败）尝试使用对象而不是数组，但后来进入定义jQuery var = s地狱，因为我不得不将所有对象名称手工堵塞到html和jQuery中。这种尝试可以在＆＃39; Legacy＆＃39;上面.git中的目录。

我已经看到有关Stack Overflow的updateTo()和recompute()建议，但我不确定是否/我如何能够整合它们。

非常感谢任何输入！我不反对废弃东西并从头开始：这是一个学习练习。

Answer 1

由于时间紧迫，我无法做出一个有效的例子，但我可以给你一些建议。这些建议仅适用于您不编码可重用库的情况。

我创建了重新计算其他属性和/或html的属性（函数）。

var _total = 0, _tax = 0, _grand = 0;

function totalChange() {
    $('#prop1').val(_prop1);
    tax(_total * .08)
    _.debounce(_grand);
}

function total(val) {
    if(val) {
        _total = val;
        totalChange();
    }
    return _total;
}

然后，您可以为设置html或其他属性的每个属性创建一个getter和setter。

我实际上会推荐emberjs或angular或backbone，因为它们会提供您正在寻找的确切功能。

今天我很无聊，并使用ember为你创建了一个jsfiddle。如果您有疑问，请告诉我。

JS / jQuery从按钮onclick-＆gt;提示符重新计算对象构造函数值

1 个答案: