如何使用 Jquery 获取 XML 文件,并在每次加载时以随机顺序显示元素一次
How to Get XML file with Jquery and Display Elements in Random Order ONCE per load?
我一直在尝试用Ajax构建一个问答应用程序。我需要帮助创建特定函数。我创建了具有不同问题和答案的XML文件。基本思想是使用"get"函数(1)加载XML问题文件和(2)使用"display"和"math.random"函数显示随机的"问题"元素(相应的"答案"元素将同时显示,但Javascript隐藏在视图中。这是我正在使用的 XML 文件的格式。这些节点被父节点 Words 包围。
<WordQuestions>
<Question>Question1</Question>
<Answer>Answer1</Answer>
</WordQuestions>
<WordQuestions>
<Question>Question2</Question>
<Answer>Answer2</Answer>
</WordQuestions>
我需要创建一个函数,可以从XML文件中随机选择一个问答元素,显示给用户,但不会在用户随后点击时再次显示它。因此,一旦向用户显示了一个问题,就需要将其从下次单击时向用户显示的问题列表中删除。有人知道如何做到这一点吗?
我创建了一个类似的功能,它像一个魅力一样工作,但它的限制在于它太随机了 - 一个问答元素可能永远不会被选择显示给用户,或者它可能被选择不成比例的次数。用户需要练习所有问题。这是此函数的精简版本。
<script language = "javascript">
function getCategory()
{
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
XMLHttpRequestObject.overrideMimeType("text/xml");
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject) {
var P = document.LoadCategory.Load.value;
if (P == "Category1") {XMLHttpRequestObject.open("GET", "Catgory1.xml", true)}
if (P == "Category2") {XMLHttpRequestObject.open("GET", "Category2.xml", true)}
if (P == "Category3") {XMLHttpRequestObject.open("GET", "Category3.xml", true)}
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
var xmlDocument = XMLHttpRequestObject.responseXML;
displayCategory(xmlDocument);
}
}
XMLHttpRequestObject.send(null);
}
}
function displayCategory (xmldoc)
{
Questionnodes = xmldoc.getElementsByTagName("Question");
Answernodes = xmldoc.getElementsByTagName("Answer");
var i = Math.floor((Math.random()*1000)%Questionnodes.length);
var i = Math.floor((Math.random()*1000)%Answernodes.length);
var displayText1 =
Questionnodes[i].firstChild.nodeValue;
var target = document.getElementById("targetDiv1");
target.innerHTML=displayText1;
var displayText2 =
Answernodes[i].firstChild.nodeValue;
var target = document.getElementById("targetDiv2");
target.innerHTML=displayText2;
}
</script>
现在,我不知道我是否能够更改此代码以获取所需的函数。我尝试将XML文件解析为javascript数组(然后随机选择并删除一个元素),但无处可去。如果有人有一些建议,我将不胜感激。再一次,我想要一个可以从XML文件中随机选择问答元素的函数,但只向用户显示一次。干杯伙计们。(对不起,这太啰嗦了)。
编写一个带有 var hasbeenshowed、hasbeenanswered、useranswer、function getquestion、function getanswer 的类。
实例化类,在加载时填充 XML 文件中的值,您可以添加到数组并使用随机数选择随机问题。
这里有一个链接,指向我将如何做你想做的事情的例子:http://jsfiddle.net/dievardump/xL5mg/4/
我注释了代码的某些部分,并"模拟"了您的getCategory
方法。
注意:从我的代码来看,我认为没有设法做的是"pickRandom"方法。我认为您几乎拥有做其他部分所需的一切。
我在代码中做什么:
- 我有一系列问题和答案
- 我有一个问答构造函数
当服务器结果出现时,我"解析"xml文件并用QuestionAndAnswer对象填充集合。
在HTML中是一个"加载问题"按钮。当您单击它时,它将调用 displayQuestion 方法。
此方法从集合中选取(获取和删除)随机 QandA 对象,然后显示问题和按钮以查看关联的答案。
就像我在评论中所说的那样,我决定一个接一个地添加问题,但是您可以通过只有一个问题和响应处理程序并修改其内容来更改它。
如果有一天jsfiddle决定不再工作,这是代码:
爪哇语
(function() {
// Question and Answer collection
var oQandACollection = {
collection : [],
length : 0,
// get a QandA object
get : function(i) {
if (i < this.length) {
return this.collection[i];
}
return null;
},
// add a QandA object
add : function(qanda) {
this.collection.push(qanda);
this.length++;
},
// remove a QandA object
remove : function(i) {
if (typeof this.collection[i] !== 'undefined') {
this.collection.splice(i, 1);
this.length--;
}
},
// randomly pick an object from the collection
pickRandom : function() {
if (this.length === 0) return null; // return null if there is no object in the collection
var i = Math.floor(Math.random() * this.length);
var qanda = this.get(i);
this.remove(i);
return qanda;
}
};
// Question and Answer Object
var QandA = function(xmlNode) {
var question = xmlNode.getElementsByTagName('Question')[0] || null;
var answer = xmlNode.getElementsByTagName('Answer')[0] || null;
if (question && answer) {
this.question = question.textContent;
this.answer = answer.textContent;
} else {
return null;
}
};
// function to use as ajax request handler
function fillQandA(xmlDoc) {
// get all WordQuestions elements
var wrappers = xmlDoc.getElementsByTagName('WordQuestions');
for(var i = 0, l = wrappers.length, qanda = null; i < l; i++) {
// create a new question from the current wrapper
// we could have perfom the getElementsByTagName('Question') here
// but since the code is really specific to your example i putted it in the constructor of QandA
// You can change it
qanda = new QandA(wrappers[i]);
if (qanda) {
oQandACollection.add(qanda);
}
}
};
var eList = document.getElementById('qa-list'),
eLoadQuestion = document.getElementById('load-qanda');
// functions to display a question
// i choosed to add question the one after the others,
// so i re-create html elements at every display
// but you also can modify it to have just one question at a time
// matter of choice
function displayQuestion() {
var qanda = oQandACollection.pickRandom(); // get a question
if (qanda) { // if there is a question
// create elements
var eQuestion = document.createElement('p'),
eAnswer = document.createElement('p'),
eBtn = document.createElement('button');
eQuestion.textContent = qanda.question;
eAnswer.textContent = qanda.answer;
eQuestion.classNAme += ' question';
eAnswer.className += ' answer';
eBtn.textContent = 'Show Answer';
// add click event listener to the button to show the answer
eBtn.addEventListener('click', function() {
eAnswer.style.display = 'block';
eList.removeChild(eBtn);
}, false);
eList.appendChild(eQuestion);
eList.appendChild(eAnswer);
eList.appendChild(eBtn);
}
};
// add click event handler on display
eLoadQuestion.addEventListener('click', displayQuestion, false);
// simulate xhr request
function getCategory() {
// fill fake Q&A xml document
var xmlDoc = document.createElement('root');
for(var i = 0, wrapper = null, question = null, answer = null; i < 10; i++) {
wrapper = document.createElement('WordQuestions');
question = document.createElement('Question');
question.textContent = 'Question ' + (i+1);
answer = document.createElement('Answer');
answer.textContent = 'Answer ' + (i+1);
wrapper.appendChild(question);
wrapper.appendChild(answer);
xmlDoc.appendChild(wrapper);
}
// us as xhr request handler like : fillQandA(XMLHttpRequestObject.responseXML);
fillQandA(xmlDoc);
}
getCategory();
// test function
function test() {
for(var i = oQandACollection.length; i--; ) {
displayQuestion();
}
}
//test();
})();
.HTML
<div class="wrapper">
<div id="qa-list">
</div>
<button id="load-qanda" value="Load new question">Load new question</button>
</div>
.CSS
.wrapper {
width : 500px;
}
.wrapper > div {
position : relative;
width : 100%
}
.answer {
display : none;
}
- 使用JS按顺序显示图像,而不是随机显示
- 如何随机显示列表项的顺序
- 我应该怎么做才能将这个数组从随机更改为在页面刷新时按顺序显示
- 批次图 在 X 轴上按顺序显示不同年份的数据
- 文本未按正确的顺序显示
- 要按顺序显示的图像
- 通过Angular Directive按顺序显示月份
- 如何知道选中/突出显示的文本jquery的顺序出现
- 循环中元素的显示顺序
- Javascript测试-使用Array.prototype以随机顺序显示选项
- 如何以反向/从右到左的顺序显示阿拉伯语网站的Nivo滑块分页
- 从下拉列表中的数组中选取某个项目,然后将其显示为第一项并按字母顺序显示
- 来自 flickr 的图像数组未按预期顺序显示
- 以随机顺序显示 ng 重复项目
- 按顺序显示动画 SVG 元素
- 如何更改服务器上项目的顺序,客户端获得正确的显示顺序
- 为什么JSON.stringify的显示顺序与遍历数组的顺序不同
- 解析笑脸与文本字符串html和保持笑脸在显示顺序
- HTML SSE或PHP SSE . innerhtml显示顺序
- 使用CF/Javascript/HTML随机化DB中MC答案的显示顺序