1

テキストボックスに表示される単語のリストのdivがあります

<div id = "rightbox" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div><input type="text" id="appleword" value="apple" class="textbox" readonly="ture" draggable="true" ondragstart="drag(event)"></div>
    <div><input type="text" id="orangeword" value="orange" class="textbox" readonly="ture" draggable="true" ondragstart="drag(event)"></div>
    <div><input type="text" id="peachword" value="peach" class="textbox" readonly="ture" draggable="true" ondragstart="drag(event)"></div>
</div>

同様のテキスト ボックス (配列内) を異なる値で動的に作成する際に助けが必要です。

4

1 に答える 1

0 
var words = ['apple', 'orange', 'peach'], // add more to array if needed
    newInputs = document.createDocumentFragment(); // fragment to collect new inputs

// Loop through array of words and generate inputs
words.forEach(function (word) {
    var wrapper = document.createElement('div'),
        fieldSet = document.createElement('fieldset'),
        input = document.createElement('input'); // Inputs default to type=text

    // Decorate elements with needed attributes here (abbreviated)
    wrapper.id = word + 'word';
    input.id = word + 'input';
    input.setAttribute('value', word);
    input.setAttribute('class', 'textbox');
    input.readOnly = true;

    // Nest all these elements and add them to the fragment
    newInputs.appendChild(wrapper).appendChild(fieldSet).appendChild(input);
});

// Insert the fragment into the DOM
document.getElementById('rightbox').appendChild(newInputs)

必要に応じてコードを調整して、不足している属性とイベント ハンドラーを追加します。IE9 よりも古いものをサポートする必要がある場合は、forEachループをループに変更してforください。

于 2013-05-20T07:03:28.967 に答える