2

JSON 形式でデータを生成するための単純なインターフェイスを作成しようとしています。最初のオブジェクトを正常に追加できます。しかし、別のものを追加しようとすると (「myDict」配列オブジェクトに追加します。以下のコードを参照)、元のオブジェクトの値が上書きされ、空のキー/値のペアも追加されているようです。

これは、「myDict」に新しいインスタンスが追加されるたびに「createObj」オブジェクトの新しいインスタンスを作成しないことに関連していると推測しています。そのため、新しいインスタンスを動的に作成する方法を見つけようとしています。これまでの私のコードは次のとおりです。

// VARIABLES
var myDict = [];

// CLASSES
function createObj() {
    this.myObj = {};
}
createObj.prototype.newPair = function() {
    this.newKey = document.getElementById('key').value;
    this.newValue = document.getElementById('value').value;
    this.myObj[this.newKey] = this.newValue;

    console.log(this.myObj);

    document.getElementById('key').value = null;
    document.getElementById('value').value = null;
    document.getElementById('key').focus();
}
createObj.prototype.addIt = function() {
    myDict.push(this.myObj);
    console.log(myDict);
}

// ACTIONS
$('#createNew').click(function() {
    $('#item').show();
    var myItem = new createObj();

    $('button#create').click(function() {
        myItem.newPair();
    });

    $('#done').click(function() {
        $('#item').hide();
        myItem.addIt();
    });
});

ここで同様のスタック オーバーフローの質問を確認しました:オブジェクト インスタンスを動的に作成するための規則は何ですか?

. . . しかし、それは私の問題に対する答えを提供していないようです。参考になる場合は、JSFiddle をご覧ください: http://jsfiddle.net/mysterexs/rffmV/

注: JSFiddle は出力を表示しませんが、すべてのコードを提供し、より多くのコンテキストを提供します。どんな助けでも大歓迎です。

4

2 に答える 2

0

一方で、クラスを作成し、クラス内でプロトタイプのプロパティを定義し、クラスをインスタンス化するため、あなたの状況は興味深いものです。一方、クラスのインスタンスは一度に 1 つしか存在しないため、クラスは不要になります。また、一連のテキストボックスを同時に作成し、それらを破棄しているという調査によって直接検出可能な奇妙な動作もあります。つまり、それらの値は常に 1 つの場所に残ります。

ID が同じページで重複しないように HTML マークアップが変更されたことを念頭に置いて、これらの問題を解決するフィドルを次に示します。

// VARIABLES
var myDict = [];

// CLASSES
function createObj() {
    this.myObj = $('.item').eq(0);
}
createObj.prototype.newPair = function () {
    var newPair = this.myObj.clone();
    $('#container').append(newPair);
    newPair.find('.key').focus();
}
createObj.prototype.addIt = function () {
    myDict = [];
    $('.item').each(function (i, o) {
        var item = $(o);
        myDict.push({
            'key': item.find('.key').val(),
            'value': item.find('.value').val()
        });
    });
    console.log(myDict);
}

// ACTIONS
var myItem = new createObj();
$('.item').hide();

$('#createNew').click(function () {
    $('.item').show();
});
$('#add').click(function () {
    myItem.newPair();
});

$('#done').click(function () {
    $('.item').hide();
    myItem.addIt();
});
于 2013-10-12T18:28:09.247 に答える