Javascript JS/jQuery从按钮onclick重新计算对象构造函数值->；促使

动态更新jQuery生成的表中的值时遇到问题

我在计算相邻

内容的值旁边插入了一个按钮，目的是

.click（function（）{prompt（“…”，“…”）}

不仅会更新感兴趣的值（hours，avgCustomers，avgpourchase），还会重新计算相关

该表的内容是在对象构造函数的

$（document.ready

上计算的，使用数组作为输入值（参见Shops.js@，和/或下面的内容）。在git中，“index.html”是感兴趣的页面

单击事件会更新显示的值，但我无法确定如何使表的其余部分基于新值重新计算

  //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;
    }
*/
});

//甜甜圈店构造函数
功能车间（loc、小时、minCust、maxCust、avgDonCust、avgCust、donHr、donDay）{
this.loc=loc；
这个.小时=小时；
console.log（this.loc+”，Hours:“+this.Hours）；
this.minCust=minCust；
this.maxCust=maxCust；
this.avgDonCust=avgDonCust；
//每小时平均客户的随机抽样：
this.avgCust=getCustpHr（this.hours，this.minCust，this.maxCust）；
console.log（this.loc+），每小时客户数：“+this.avgCust”；
//每小时烘焙的甜甜圈：
this.donHr=getDon（this.avgCust，this.avgDonCust）
log（this.loc+”，每小时烘焙的甜甜圈：“+this.donHr）；
//每天要烘焙的甜甜圈：
this.donDay=getSum（this.donHr）
console.log（this.loc+”，每天要烘焙的甜甜圈：“+this.donDay）；
};
//甜甜圈店声明：
风险值=[5]；
商店[0]=新商店（“市中心”，8,8,43,4.5）；
商店[1]=新商店（“国会山”，24、4、37、2）；
店铺[2]=新店铺（“南湖联盟”，10、9、23、6.33）；
店铺[3]=新店铺（“威奇伍德”，7,2,28,1.25）；
店铺[4]=新店铺（“巴拉德”，10,8,58,3.75）；
//使用甜甜圈商店统计信息填充index.html：
$（文档）.ready（函数（）{
$。每个（商店、功能（）{
$row=$（''）；
$（'#shopGrid tbody'）。追加（$row）；
$row.append（$（'
'+this.loc+'
开放时间：'+
''这个.小时数''
+“+”
”
+“
平均购买量：”+
''+this.avgDonCust+''
+“+”
”
+“
商店流量：”+
'+this.minCust+'-'+this.maxCust+'
+“+”
））
//插入.slice（）以控制格式：
$row.append（$（''+this.avgCust.slice（0,8）+'
'
+这个.avgCust.slice（8,16）+'
'
+此.avgCust.slice（16）+''）；
$row.append（$（''+this.donHr.slice（0,8）+'
'
+这个.donHr.slice（8,16）+'
'
+这个.donHr.slice（16）+''）；
$row.append（$（''+this.donDay+''）；
});
//商店统计信息编辑按钮：
//如果“编辑按钮效果”为“其他”：
$（“.edit”）。单击（函数（）{
变量测试=$（“#小时”）.text（）；
控制台日志（测试）；
var newHours=提示（“输入介于0和24之间的新数字”，“新小时”）；
如果（newHours由于时间紧迫，我无法制作一个工作示例，但我可以给您一些建议。这些建议仅适用于您没有编写可重用库的情况

我将创建重新计算其他属性和/或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;
}

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

我实际上会推荐或，因为它们提供了您想要的确切功能

今天我很无聊，用ember为你创建了一个新的应用程序。如果你有什么问题，请告诉我。
谢谢FelesMortis！！我刚开始学习JS+jQuery的前几周，所以我不确定我是否会在其他版本的JS上获得很多吸引力。从概念上讲，我完全理解你的意思！不过我不知道如何实现。项目ect只供我练习，所以没什么大不了的。祝你周末愉快！