如何在调查中更改我的问题顺序？

时间：2016-12-18 19:31:08

标签： javascript jquery html dynamic

我有一项调查，我正在构建基于添加/删除按钮生成问题/答案/等。 Picture of the survey

我想让“上移/下移”按钮能够完全改变问题的顺序，这样如果它们在问题1中点击下移，它将交换问题1和2的位置，等等。我目前正在使用jQuery / javascript

这是相对代码

<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>

以下是如何使用上移/下移按钮创建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);
    });
});

我主要担心的是

1）我不知道在Move Up / Down功能中使用newTextBoxDiv是否正确，但我也不知道我还会使用什么。 2）显然最关心的是insertAfter和insertBefore正确的方法吗？看起来这似乎不是正确的方法，但我不知道我一般会如何做到这一点。另外，我将不得不弄清楚如何在切换后更新这些数字文本，因为它会读取2,1,3这将是一种痛苦。

我关闭了吗？

2 个答案:

答案 0 :(得分：1)

这不是一个完整的代码，因为它没有完全功能，但是它确实说明了我将如何写出一个动态控件，如OP中概述的那个/ p>

请记住，这仅仅是一个建议，如果时间不长，就会发表评论。

通过使用相当于自定义类型（AKA类或实例化）的Javascript来处理动态HTML元素的存储 

/*  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>

享受并祝你好运。

答案 1 :(得分：0)

  

我想让Move Up / Move Down按钮能够改变   完全排序问题，以便如果他们，例如，击中   在问题1上下移，它将交换问题1和问题1的位置   2等等。

下面的布局与问题中的布局大大简化，但它包含基本功能：

＆＃13;
＆＃13; 
$(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);
     });

});
＆＃13; 
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) '. ';
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题