Question

我需要使用JQM以一种简洁的方式呈现输入。

我认为我应该使用div来分隔每个问题，然后调用JavaScrip函数进行排序，但不知道如何进入。

Q1，Q3，Q2 ...... Q1，Q2，Q3 ...... Q3，Q2，Q1 ...... ETC

像这样：

Q1. What is your age? (Number)
Q2. What color do you prefer? (Single choice)
Q2. Tell us about the food...(Group)

以下是Mark up：

<div>
    <h4>Q1. What is your age?</h4>
</div>

    <input name='V14' id='V14' data-default-value='0' type='number' min='0' max='100' size='12' step='0.1' class=''/>

<div>
    <h4>Q2. What color do you prefer</h4>
</div>

<fieldset data-role='controlgroup' id='V15'>

<input id ='V15_1' type='radio' name='V15' value='1'><label for='V15_1'> Blue</label>
<input id ='V15_2' type='radio' name='V15' value='2'><label for='V15_2'> Red</label>
<input id ='V15_3' type='radio' name='V15' value='3'><label for='V15_3'> Yellow</label>
</fieldset>


<div>
    <h4>Q3. Tell us about the food</h4>
</div>

<div data-role='collapsible-set'>
<div data-role='collapsible' data-collapsed='false' data-theme='b' data-content-theme='d'>
<h3>Flavour</h3>

    <fieldset data-role='controlgroup' id='V16'>
    <input id ='V16_1' type='radio' name='V16' value='1'><label for='V16_1'> Good</label>
    <input id ='V16_2' type='radio' name='V16' value='2'><label for='V16_2'> Fair</label>
    </fieldset>
</div>
</div>

<div data-role='collapsible-set'>
<div data-role='collapsible' data-collapsed='false' data-theme='b' data-content-theme='d'>
<h3>Taste</h3>

    <fieldset data-role='controlgroup' id='V17'>
    <input id ='V17_1' type='radio' name='V17' value='1'><label for='V17_1'> Good</label>
    <input id ='V17_2' type='radio' name='V17' value='2'><label for='V17_2'> Fair</label>
    </fieldset>
</div>
</div>

<div data-role='collapsible-set'>
<div data-role='collapsible' data-collapsed='false' data-theme='b' data-content-theme='d'>
<h3>Temperature</h3>
    <fieldset data-role='controlgroup' id='V18'>
    <input id ='V18_1' type='radio' name='V18' value='1'><label for='V18_1'> Good</label>
    <input id ='V18_2' type='radio' name='V18' value='2'><label for='V18_2'> Fair</label>
    </fieldset>
</div>
</div>

Answer 1

基本上只需将您的问题包装成单独的div，然后按以下步骤操作：

<div id="wrapper">
    <div class="question">
    question1
    </div>

    <div class="question">
    question2
    </div>

    <div class="question">
    question3
    </div>
</div>

<script type="text/javascript">
    function shuffle(array) {
        var counter = array.length, temp, index;

        // While there are elements in the array
        while (--counter > -1) {
            // Pick a random index
            index = (Math.random() * counter) | 0;

            // And swap the last element with it
            temp = array[counter];
            array[counter] = array[index];
            array[index] = temp;
        }

        return array;
    }

    var shuffled = shuffle($('.question'));
    $('#wrapper').html('');

    for (var a = 0; a < shuffled.length;a++) {
        $('#wrapper').append(shuffled[a]);
    }
</script>

See demo fiddle

随机借用How can i shuffle an array in JavaScript?。

希望它有所帮助。

Jquery Mobile随机输入

1 个答案: