Question

在我的listview中我有几个问题列表，现在我在点击刷新按钮时尝试制作它，列表视图中的问题将按随机顺序刷新。我想知道我是否只能刷新页面的部分而不是整页？

 <ul id="list" data-role="listview" data-filter="true" data-filter-reveal="true"      data-filter-placeholder="Search Questions..." data-inset="true" ></ul>
<script>
var jsonfile = 'data.json';
var qData = [];
var qHint = [];

$.getJSON(jsonfile, function(data) {

while (data.activity.length) {
    var index = Math.floor(Math.random() * data.activity.length);
    qData.push(data.activity[index].question);
    qHint.push(data.activity[index].hint);
        data.activity.splice(index, 1)
    }

for (var i = 0; i < 8; i++) {
    question(qData[i], i);
     hint(qHint[i], i);
    $('#text' + (i + 1)).textinput();
    $('#submit' + (i + 1)).button();
    $('#cancel' + (i + 1)).button();

}

function question(data, i) {
    $('#list').append('<li><a href=#mypanel'+ (i + 1)+ '  data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc" id="list">'+ data + '</a></li>'); // list item

}
 function hint(data, i)
 {
    $('#mypanel' + (i + 1)).append("<div align='center' style='margin-top:30px;'><font style='font-family:Helvetica, Arial, sans-serif ;color:white;' size='5px' ><b>Question Hint : </b></font></div><br/><label for=text" + (i + 1) + " id=paneltitle"+ (i + 1)+ " style='margin-top:10px;text-align:center;color:white;'>"+ data + "</label>");// panel item
    $('#paneltitle' + (i + 1)).append('<input type="text" id=text'+ (i + 1) + ' >');
    $('#mypanel' + (i + 1)).append('<a href="#header" data-role="button" id=submit'+ (i + 1)+ ' data-inline="true" data-rel="close" data-icon="check" style="margin-left:75px;">Submit</a>');
    $('#mypanel' + (i + 1)).append('<a href=#mypanel'+ (i + 1)+ ' data-role="button" id=cancel'+ (i + 1)+ ' data-inline="true" data-rel="close" data-icon="delete2" style="margin-left:75px;">Cancel</a>');
 }

//Affected part
$('#PageRefresh').click(function() {

          location.reload();

});

$('#list').listview('refresh');
})


       <div data-theme="a" data-role="footer" data-position="fixed">
            <div data-role="navbar">
            <ul>
                <li><a id="PageRefresh" data-icon="refresh">Refresh</a></li>
            </ul>
            </div>
        </div>

Answer 1

这样做;

JSfiddle

<强> HTML

<ul id="myList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<button id="myButton">Click me</button>

<强>的JavaScript

'use strict';

Array.prototype.shuffle = function() {
    var s = [];
    while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
    while (s.length) this.push(s.pop());
    return this;
}

$(document).ready(function(){
    $('#myButton').click(function() {
        // Get all children of the <ul>
        var lis = $('#myList').children().get();

        // Shuffle the DOM elements (children) in the array
        lis.shuffle();

        // Empty the <ul> list
        $('#myList').html('');

        // Loop the shuffled array of DOM-elements and put them back in the <ul>
        for (var i = 0; i < lis.length; i++) {
            $('#myList').append(lis[i]);
        }
    });
});

我使用一个干净的例子作为一个更容易理解的演示。我认为用一个干净的例子来理解你比在循环中完全抛出你的代码更容易。

祝你好运！

刷新功能仅刷新页面的某些部分

1 个答案: