如何在输入更改时动态更新对象?

时间:2014-04-19 02:02:12

标签: javascript jquery oop

我有一个输入标签,我想动态更新。当用户更改输入的值时,新值应替换数组内对象的旧值。 我在这里不合时宜。有人可以帮助我。

function Skills () {
    var Skills = this;
    this.skill = new Array();
    this.skill[0] = {
        id: '1_skill_field',
        value: 'Insert Skill',
        //change function to be used when user changes the value.
        change:function (input) {
            Skills.skill[parseInt(input.id)["value"]=$("#"+input.id).val();
        }           
    }
    var create_section_field = function () {
        var section_field = $('<div class="section_fields"></div>');
            section_field.appendTo('#skill');
        }
        var create_fields = function () {
            var input_field = $('<div class="input_fields"></div>');
            input_field.appendTo('#skill .section_fields');

            var skill_field=$('<input>', {
                name: '1_skill_field',
                id: Skills.skill[0]["id"],
                value: Skills.skill[0]["value"],
                type: 'text',
                //onChange uses function to change saved value of object inside array
                onChange: Skills.skill[0].change(this)
            });
            skill_field.appendTo($('#skill .input_fields'));
        }
    }

1 个答案:

答案 0 :(得分:0)

我做了你正在做的事......来看看:

http://jsfiddle.net/V4HLz/1/

这很有趣。 :d

var type = $('#type'),
    input = $('#input'),
    btn = $('#update'),
    show = $('#out'),
    stats = $('.skills');

var value, sType, skills={};

btn.click(function(){
    value = parseFloat(input.val().trim());
    sType = type.val();
    if (!value || !sType) return;
    skills.update(sType,value);
    updateInput();
});

type.change(updateInput);

function updateInput() {
    input.val(skills.data[type.val()]);
}

skills.update =  function(t,v){ this.data[t] = v; };

skills.data = {
    eating:0,
    fighting:0,
    flying:0,
    reg:0
};

show.click(function(){
    $.each( skills.data, function(k,v){
        stats.find('#'+k).children('span').text(v);
    });
});