アンケートの質問の順序を変更するにはどうすればよいですか？

Question

私は、追加/削除ボタンに基づいて質問/回答/などを生成する私が構築している調査をしています。 Picture of the survey

「Move Up/Move Down」ボタンを使用して質問の順序を変更できるようにして、たとえば質問1で下に移動した場合、質問1と2など。私はここで

は、相対コードここ

<input type='button' value='Add Question' id='addButton'/> 
     <input type='button' value='Remove Question' id='removeButton'/> 
     <div id='TextBoxesGroup'> 
      <div id="TextBoxDiv1"> 
       <input type="button" value="Move Up" id="MoveUpButton1" /> 
       <input type="button" value="Move Down" id="MoveDownButton1" /> 
       <label>Question #1 : </label> 
       <input type='text' id='questionbox1'/> 
       <select id="choice1" class="choice"> 
        <option value="text">Text Box</option> 
        <option value="radio">Radio Button</option>    
        <option value="checkbox">Check Box</option> 
       </select> 
       <input type="button" value="Remove" id="remove1" class="remove" onclick="formSubmit(this.id)";/> 
       <br/><label>Answer #1 : </label> 
       <div id="Answers1" class="answers"> 
         Option 1: <input type="text" id='answerbox11' name='answerbox1' class="answerbox" value="" /><span><input type="text" id='hiddenanswerbox11' name='answerbox1' class="hiddenTextBoxes" value="" hidden="hidden"/></span> 
        <br/>Option 2: <input type="text" id='answerbox12' name='answerbox1' class="answerbox" value="" /><span><input type="text" id='hiddenanswerbox12' name='answerbox1' class="hiddenTextBoxes" value="" hidden="hidden"/></span> 
        <br/>Option 3: <input type="text" id='answerbox13' name='answerbox1' class="answerbox" value="" /><span><input type="text" id='hiddenanswerbox13' name='answerbox1' class="hiddenTextBoxes" value="" hidden="hidden"/></span> 
        <br/>Option 4: <input type="text" id='answerbox14' name='answerbox1' class="answerbox" value="" /><span><input type="text" id='hiddenanswerbox14' name='answerbox1' class="hiddenTextBoxes" value="" hidden="hidden"/></span> 
       </div> 
      </div> 
     </div> 

であるjQueryの/ JavaScriptで現在これをやっていることのdivを作成する方法のためのバックエンド機能とは何か、私は移動するまでに達成しようとしています/ボタンダウン

$(document).ready(function() { 
var counter = 2; //since question 1 is already displayed 
var max_fields = 100; 

$("#addButton").click(function() { 

    if (counter > max_fields) { 
     alert("Only " + max_fields + " Questions allowed"); 
     return false; 
    } 

    var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 

    newTextBoxDiv.after().html('<input type="button" value="Move Up" id="MoveUpButton' + counter + '" /> ' + 
     '<input type="button" value="Move Down" id="MoveDownButton' + counter + '" /> ' + 
     '<label>Question #' + counter + ' : </label>' + 
     '<input type="text" name="textbox' + counter + 
     '" id="questionbox' + counter + '" value="" />' + 
     ' <select id="choice' + counter + '" class="choice">' + 
     '<option value="text">Text Box</option><option value="radio">Radio Button</option><option value="checkbox">Check Box</option></select>' + 
     '<input type="button" value="Remove" id="remove' + counter + '" class="remove" onclick="formSubmit(this.id)";/>' + 
     '<br/><label>Answer #' + counter + ' : </label>' + 
     '<div id="Answers' + counter + '" class="answers">' + 
     'Option 1: <input type="text" id="answerbox' + counter + 
     '1" name="answerbox' + counter + '" class="answerbox" value="" />' + 
     '<span><input type="text" id="hiddenanswerbox' + counter + '1" name="answerbox' + counter + '" class="hiddenTextBoxes" value="" hidden="hidden"/></span>' + 
     '<br/>Option 2: <input type="text" id="answerbox' + counter + 
     '2" name="answerbox' + counter + '" class="answerbox" value="" />' + 
     '<span><input type="text" id="hiddenanswerbox' + counter + '2" name="answerbox' + counter + '" class="hiddenTextBoxes" value="" hidden="hidden"/></span>' + 
     '<br/>Option 3: <input type="text" id="answerbox' + counter + 
     '3" name="answerbox' + counter + '" class="answerbox" value="" />' + 
     '<span><input type="text" id="hiddenanswerbox' + counter + '3" name="answerbox' + counter + '" class="hiddenTextBoxes" value="" hidden="hidden"/></span>' + 
     '<br/>Option 4: <input type="text" id="answerbox' + counter + 
     '4" name="answerbox' + counter + '" class="answerbox" value="" />' + 
     '<span><input type="text" id="hiddenanswerbox' + counter + '4" name="answerbox' + counter + '" class="hiddenTextBoxes" value="" hidden="hidden"/></span></div>'); 
enter code here 
    newTextBoxDiv.appendTo("#TextBoxesGroup"); 
    counter++; 
}); 
$(document).on("click", "#MoveUpButton1", function() { //hardcoded to get it working before adding in dynamic functionality 
    var searchEles = $(this).attr('id'); 
    var endingNum = searchEles.slice(-1); 
    var newTextBoxDiv = document.getElementById("TextBoxDiv" + endingNum); 
    newTextBoxDiv.insertBefore("TextBoxDiv" + endingNum); 
}); 

$(document).on("click", "#MoveUpButton1", function() { 
    var searchEles = $(this).attr('id'); 
    var endingNum = searchEles.slice(-1); 
    var newTextBoxDiv = document.getElementById("TextBoxDiv" + endingNum); 
    newTextBoxDiv.insertAfter("TextBoxDiv" + endingNum); 
    }); 
}); 

私の主な懸念は、それが移動アップ/ダウン機能でそのようnewTextBoxDivを使用することが正しいかどう

1）私は分からないですが、またI他に何を使うのか分からない。 2）大きな懸念は、明らかにinsertAfterとinsertBeforeがこれを行う正しい方法ですか？これについては正しい方法ではないように見えるが、私は一般的にどのようにこれをやっているのかわからない。さらに、私はこれらの数値テキストを更新する方法を見つけ出す必要があります。なぜなら、それは2、1、3を読むと痛みを感じるからです。

閉じる？

Answer 1

質問1と 2など。

以下のレイアウトが大幅に問題のレイアウトから簡略化されているが、それは不可欠な機能が含まれています。私は含まれていJSON配列を作成するような何かをしようとするだろう

$(document).ready(function(){ 
 

 
    $('input + span').click(function(){ 
 
    var listItem = $(this).parent(); 
 
    listItem.animate({top: '-36'}).prev().animate({top: '36'}); 
 
    setTimeout(function(){listItem.prev().before(listItem); $('li').removeAttr('style');}, 600); 
 
    }); 
 

 
    $('input + span + span').click(function(){ 
 
    var listItem = $(this).parent(); 
 
    listItem.animate({top: '36'}).next().animate({top: '-36'}); 
 
    setTimeout(function(){listItem.next().after(listItem); $('li').removeAttr('style');}, 600); 
 
    }); 
 

 
});

li { 
 
position: relative; 
 
display: block; 
 
height: 36px; 
 
font-size: 18px; 
 
line-height: 36px; 
 
} 
 

 
span { 
 
position: relative; 
 
display: inline-block; 
 
top: -2px; 
 
font-size: 24px; 
 
color: rgb(191,191,191); 
 
transform: rotate(-90deg); 
 
} 
 

 
span:nth-of-type(2) { 
 
top: 2px; 
 
transform: rotate(90deg); 
 
} 
 

 
span:hover{ 
 
color: rgb(255,0,0); 
 
text-shadow: 0 0 3px rgba(191,0,0,0.8); 
 
cursor: pointer; 
 
} 
 

 
li:first-of-type span:nth-of-type(1), 
 
li:last-of-type span:nth-of-type(2) { 
 
visibility: hidden; 
 
} 
 

 
ol { 
 
counter-reset: listOrder; 
 
} 
 

 
li::before { 
 
counter-increment: listOrder; 
 
content: counter(listOrder) '. '; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
<ol> 
 
<li><input type="text" name="text1" placeholder="text1" /> <span>&#10148;</span><span>&#10148;</span></li> 
 
<li><input type="text" name="text2" placeholder="text2" /> <span>&#10148;</span><span>&#10148;</span></li> 
 
<li><input type="text" name="text3" placeholder="text3" /> <span>&#10148;</span><span>&#10148;</span></li> 
 
<li><input type="text" name="text4" placeholder="text4" /> <span>&#10148;</span><span>&#10148;</span></li> 
 
<li><input type="text" name="text5" placeholder="text5" /> <span>&#10148;</span><span>&#10148;</span></li> 
 
</ol> 
 
</form>

Answer 2

これは、しかし、それは私がようOP

キープで概説として動的制御を書き込みする方法をを示すんその完全に機能しないという意味で、コードの完全な部分ではありませんこれは単に示唆に過ぎず、それほど長くない場合はコメントになります。

ここカスタムタイプ（AKAクラスまたはインスタンス化）

/* create global array to store questions */ 
 
var questions = []; 
 

 
/* create a Javascript class to describe what a Question is */ 
 
var Question = function(questionString, questionType, questionIndex, questionOptions) { 
 
    this.questionString = questionString; 
 
    this.questionType = questionType; 
 
    this.questionIndex = questionIndex; 
 
    this.questionOptions = questionOptions; 
 

 
    /* implement Question.generate_html() to generate HTML below */ 
 
    this.generate_html = function() { 
 
    var returnhtml = document.createElement("div"); 
 
    var buttons = this.generate_move_buttons(); 
 
    $(buttons).appendTo(returnhtml); 
 
    var group = document.getElementById("TextBoxesGroup"); 
 
    $(returnhtml).appendTo(group); 
 
    } 
 

 
    /* Question.generate_move_buttons() used by generate_html() */ 
 
    this.generate_move_buttons = function() { 
 
    var downbutton = document.createElement("input"); 
 
    var upbutton = document.createElement("input"); 
 
    $(downbutton).prop("type", "button"); 
 
    $(upbutton).prop("type", "button"); 
 
    $(downbutton).prop("value", "Move Down"); 
 
    $(upbutton).prop("value", "Move Up"); 
 
    $(downbutton).prop("data-index", this.questionIndex); 
 
    $(upbutton).prop("data-index", this.questionIndex); 
 
    $(downbutton).addClass("downButton"); 
 
    $(upbutton).addClass("upButton"); 
 

 
    var returnval = upbutton.outerHTML + downbutton.outerHTML; 
 

 
    return returnval; 
 
    } 
 

 
} /* end of Question class */ 
 

 

 
/* create an instance of Question */ 
 
var new_question = new Question("question 1", "text", 1, ["Option 1", "Option 2", "Option 3", "Option 4"]); 
 

 

 
/* Store the generated html in the main array */ 
 
questions[0] = new_question.generate_html(); 
 

 
/* create a new Question each time you click add button */ 
 
$("#addButton").on("click", function() { 
 
    var ques = new Question("new question", $("#choice1").val(), questions.length, []); 
 
    questions.push(ques.generate_html()); 
 
}); 
 

 
/* move index position up or down */ 
 
function swap(index1, index2) { 
 
    questions[-1] = questions[index1]; 
 
    questions[-2] = questions[index2]; 
 
    questions[index1] = questions[-2]; 
 
    questions[index2] = questions[-1]; 
 

 
    /* TODO: 
 
     erase TextBoxesGroup innerHTML and loop through questions, 
 
     appending questions[i] to TextBoxesGroup */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='button' value='Add Question' id='addButton' /> 
 
<input type='button' value='Remove Question' id='removeButton' /> 
 
<div id='TextBoxesGroup'> 
 
    <div id="TextBoxDiv1"> 
 
    <input type="button" value="Move Up" id="MoveUpButton1" /> 
 
    <input type="button" value="Move Down" id="MoveDownButton1" /> 
 
    <label>Question #1 :</label> 
 
    <input type='text' id='questionbox1' /> 
 
    <select id="choice1" class="choice"> 
 
     <option value="text">Text Box</option> 
 
     <option value="radio">Radio Button</option> 
 
     <option value="checkbox">Check Box</option> 
 
    </select> 
 
    <input type="button" value="Remove" id="remove1" class="remove" onclick="formSubmit(this.id)" ;/> 
 
    <br/> 
 
    <label>Answer #1 :</label> 
 
    <div id="Answers1" class="answers"> 
 
     Option 1: 
 
     <input type="text" id='answerbox11' name='answerbox1' class="answerbox" value="" /><span><input type="text" id='hiddenanswerbox11' name='answerbox1' class="hiddenTextBoxes" value="" hidden="hidden"/></span> 
 
     <br/>Option 2: 
 
     <input type="text" id='answerbox12' name='answerbox1' class="answerbox" value="" /><span><input type="text" id='hiddenanswerbox12' name='answerbox1' class="hiddenTextBoxes" value="" hidden="hidden"/></span> 
 
     <br/>Option 3: 
 
     <input type="text" id='answerbox13' name='answerbox1' class="answerbox" value="" /><span><input type="text" id='hiddenanswerbox13' name='answerbox1' class="hiddenTextBoxes" value="" hidden="hidden"/></span> 
 
     <br/>Option 4: 
 
     <input type="text" id='answerbox14' name='answerbox1' class="answerbox" value="" /><span><input type="text" id='hiddenanswerbox14' name='answerbox1' class="hiddenTextBoxes" value="" hidden="hidden"/></span> 
 
    </div> 
 
    </div> 
 
</div>

楽しみ、幸運のJavascriptの同等のものを使用することにより、ダイナミックHTML要素のストレージを処理する1つの方法です。私は移動がアップ/彼らは、例えば、質問1で 動きをダウンヒットした場合、それはの位置を交換するように、ボタンは完全に質問の 順序を変更することができ下に移動させたい