使刷新功能只刷新页面的某些部分

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]); 
     } 
    }); 
}); 

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

祝你好运！