基本的に、私は分割してから再び分割する大きな文字列を持っています。
次に、最小の分割配列を使用して、その要素をページのテキスト入力に配置する必要があります。
これは私のJavascriptです
var splitquestions = vals[2].split('\n');
//Loop to go through all current questions
for (var i = 0; i < splitquestions.length - 1; i++)
{
//trigger a question add where a single question data can be added into
$( "#add" ).trigger('click');
//split current question into separate items
var s = splitquestions[i].split(',');
//Loop to go over all sections in a question
var count = 0;
for(var j = 0; j < s.length; j++)
{
count = count + 1;
var qs = document.getElementById('questions[' + j +'][' + count + ']').value;
qs = s[j];
}
}
ユーザーが追加したい数に応じて、ページには多くの質問があります。新しい問題ブロックはそれぞれ、問題、3 つの不正解、1 つの正解で構成されます。
うまくいかない部分は最後のループ内です。ここで、's' 配列内の個々の要素を取得し、それを各テキスト入力内に配置する必要があります。
これは、「splitquestions」変数によって分割される前の生データがどのように表示されるかです:
question1,incorrect-answer1,incorrect-answer2,incorrect-answer3,correct-answer
question2,incorrect-answer1,incorrect-answer2,incorrect-answer3,correct-answer
question3,incorrect-answer1,incorrect-answer2,incorrect-answer3,correct-answer
上からわかるように、各質問は改行 (\n) で区切られ、個々の部分はコンマで区切られています。
各質問入力には、その ID に割り当てられた多次元変数があります。たとえば、上記のデータを使用すると、データの最初の行と最初の要素 (question1) は question[1][1] になります。もう 1 つの例は、データの 3 行目の 'incorrect-answer1' で、これは question[3][2] になります。最初の数字は質問番号、2 番目の数字は要素番号です。
私は多次元配列とループ内のループが初めてなので、自分で説明する方法について少し混乱しているので、これを十分に説明したことを願っています。追加情報が必要な場合は、コメントを投稿してください。最善を尽くします。
必要に応じて、これは質問要素を動的に作成する関数です。
function dynamicForm () {
//set a counter
var i = $('.dynamic-input#form-step2').length + 1;
//alert(i);
//add input
$('a#add').click(function () {
$('<table><tr><td><p><span class="left"><input type="text" class="dynamic-input" name="questions[' +i +'][1]" id="' + i + '" placeholder="Question" /></span>' + '<span class="right"><input type="text" class="dynamic-input" name="questions[' +i +'][2]" id="' + i + '" placeholder="Distraction 1" /><br /><input type="text" class="dynamic-input" name="questions[' +i +'][3]" id="' + i + '" placeholder="Distraction 2" /><br /><input type="text" class="dynamic-input" name="questions[' +i +'][4]" id="' + i + '" placeholder="Distraction 3" /><br /><input type="text" class="dynamic-input" name="questions[' +i +'][5]" id="' + i + '" placeholder="Correct Answer" /><br /><a href="#">Remove</a></span></p></td></tr></table>').fadeIn("slow").appendTo('#extender');
i++;
$("a:contains('Remove')").click(function () {
$(this).parent().parent().remove();
});
return false;
});
//fadeout selected item and remove
$("#form-step2.dynamic-input").on('click', 'a', function () {
$(this).parent().fadeOut(300, function () {
$(this).empty();
return false;
});
});
}