使用jQuery/ JS，我是否可以将JS对象的属性“绑定”到表单输入元素的值？

Question

我正在为我所在城市的宠物寄养公司建立一个在线预订系统，我在如何有效地实现这一特定功能方面遇到了困难。

用户进程的快速要点..。

1. 给出了一些初步信息(客户信息、宠物信息等)。
2. 用户选择两个日期；入住和退房日。
3. 该程序计算客户端停留的天数，并将每天抛到类" day“的构造函数中。一个..。块为每天生成并显示给用户。还值得注意的是，所有的Day对象都存储在一个数组中，该数组随后包含在mama类"ReservationData"...which中，除了Day-数组还保存一些与保留本身相关的元数据。

无论如何，我的问题是，一旦“dayBlocks”被列出并显示给用户，用户就必须能够在特定的一天为他们的宠物检查自己想要的“额外”。

所以我把它分解成{ReservationData} <-(有一个数组)-- {Days} <-(有一个数组)-- {Extras}。有14个额外的服务可供选择，所以每天显示的都是一个简单的复选框和标签列表。

理想情况下，我希望设置它，以便当用户选中复选框时，它直接&立即相应地更改reservationDataDaysExtraDeepArray中的相应变量。我体内的C-程序员想要将指针绑定到每个复选框，但我(至少我认为)非常肯定，这在jQuery中是行不通的。

虽然我想我已经很清楚地解释了这一点，但是下面是一些代码：

//Day Object/Class
function day(_date, _daynum) {
    this.date = new Date(_date);
    this.dayNum = _daynum;
    this.dayExtras = {
        'YH': false,  //<--- How can I directly manipulate
        'PP': false,  //<--- all of these guys via user-control
        'EE': false,  //<--- of corresponding/assigned 
        'ST': false,  //<--- checkboxes?
        'PT': false,
        'TT15': false,
        'TT30': false,
        'TT45': false,
        'DC': false   //--- Or can I? :/        
    };

    console.log("Day object created with date of " + day.date + " and day-number of " + day.dayNum + ".");

    this.getDayNum = function() { return this.dayNum; }
    this.getDayDate = function() { return this.date; }
}

这是我在这个网站上的第一个问题，但我做了很多搜索，而且还是lost...thanks的家伙！

Answer 1

假设您的复选框的名称与您的dayExtras对象中的键相对应，如下所示。

//Day Object/Class
function day(_date, _daynum) {
    this.date = new Date(_date);
    this.dayNum = _daynum;
    this.dayExtras = {
        'YH': false,  //<--- How can I directly manipulate
        'PP': false,  //<--- all of these guys via user-control
        'EE': false,  //<--- of corresponding/assigned 
        'ST': false,  //<--- checkboxes?
        'PT': false,
        'TT15': false,
        'TT30': false,
        'TT45': false,
        'DC': false   //--- Or can I? :/        
    };

    console.log("Day object created with date of " + day.date + " and day-number of "+day.dayNum+".");

    this.getDayNum = function() { return this.dayNum; }
    this.getDayDate = function() { return this.date; }
    this.setDayExtras = function (key,val) {
      if(key in this.dayExtras){
        this.dayExtras[key] = val;
      }
    }
}

var myDay = new day(null,null);

$(document).on('change','#myForm input[type="checkbox"]', function () {
  myDay.setDayExtras(this.name,this.checked);
});

Answer 2

成功了，谢谢你指点我的方向，伙计们！

function saveExtra(me) {
    var extraName = me.attr('name');
    var extraVal = me.val();
    (reservationData[extraName]).dayExtras[extraVal] = me.prop('checked');
    for (key in reservationData) {
        (reservationData[key]).dump(); //Day data-dump method.
    }
}

this.generateExtrasGrid = function() {
    var fieldName = "day" + this.dayNum + "";
    var exGrid = "";
    exGrid += "<form class='extrasGrid' id='" + this.dayNum + "'>";
    exGrid += "<input type='checkbox' class='extra' name='" + fieldName + "' value='YH' onclick='saveExtra($(this))' />";............
    exGrid += "</form>";
    return exGrid;
}​