- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个简单的抽认卡游戏,其中(随机)循环 JSON 文件中的人员姓名列表,然后用户选择正确的人。
我可以选择工作人员,但我似乎无法随机循环 JSON 文件。我看过here和 here但都无法让其中任何一个工作。
这是 JSFiddle: http://jsfiddle.net/pacj02xq/1/
HTML:
<div>
<h3>Who is this?</h3>
<div id="namesOutput"></div>
</div>
JavaScript (jQuery):
$(document).ready(function() {
var answers = 3;
//
// Retrieve JSON
//
$.getJSON("https://gist.githubusercontent.com/keenanpayne/ada118875c2a5c672cd3/raw/8a72fc99c71c911f497200a7db3cc07b2d98dc82/sample.json", function(result) {
var staffNumber = 0;
var correctAnswer = "";
var correctAnswerID = Math.floor((Math.random() * 3) + 1);
// Loop through set
$.each(result, function(i, field) {
staffNumber++;
if (staffNumber == correctAnswerID) {
correctAnswer = field.name;
}
// Output possible answers
$("#namesOutput").append('<a class="btn gameBtn" title="' + staffNumber + '">' + field.name + '</a>');
// Break loop depending on level
if (staffNumber === answers) {
return false;
}
});
//
// Check answer
//
$(".gameBtn").click(function(e) {
e.preventDefault();
if ($(this).attr('title') == correctAnswerID) {
$(this).addClass("btn--correct");
$('.btn').not(".btn--correct").addClass("btn--incorrect");
} else {
$(this).addClass("btn--incorrect");
}
});
});
});
最佳答案
我会稍微改变一下它的工作方式。我不会像您想要的那样在循环时获取随机索引,而是使用洗牌方法将项目添加到数组中,然后随机化它们的顺序。
我添加了一个随机播放函数和一个对象大小函数,以便更轻松地处理返回的数据。
1)我们循环遍历 JSON get 的结果,并将随机项存储为正确答案,其余所有项都添加到数组中。
2) 然后我们将错误答案打乱,并将其数量减少到比您需要的选项数少 1 个
3)然后我们将正确答案添加到新缩短的错误答案列表中,并再次打乱它们
4) 最后,我们将此数组扁平化为字符串并将其附加到 DOM。
// courtesy of http://stackoverflow.com/a/6274381/648350
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
// courtesy of http://stackoverflow.com/a/6700/648350
Object.size = function(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
$(document).ready(function() {
var answers = 3;
//
// Retrieve JSON
//
$.getJSON("https://gist.githubusercontent.com/keenanpayne/ada118875c2a5c672cd3/raw/8a72fc99c71c911f497200a7db3cc07b2d98dc82/sample.json", function(result) {
var numberOfResults = Object.size(result);
var staffNumber = 0;
var correctAnswer = "";
var correctAnswerID = Math.floor((Math.random() * numberOfResults) + 1);
var outputHtml = [];
// Loop through set
$.each(result, function(i, field) {
staffNumber++;
if (staffNumber == correctAnswerID) {
correctAnswer = '<a class="btn gameBtn" title="' + staffNumber + '">' + field.name + '</a>'; // store our correct answer
}else{
outputHtml.push('<a class="btn gameBtn" title="' + staffNumber + '">' + field.name + '</a>'); // add all the other answers
}
});
outputHtml = shuffle(outputHtml).slice(0, answers - 1); // -1 because one answer will come from the 'correct' answer
outputHtml.push(correctAnswer); // add correct answer after slicing
outputHtml = shuffle(outputHtml); // shuffle the correct answer around again
outputHtml = outputHtml.join(''); // flatten outputHtml into single string
$("#namesOutput").append(outputHtml); // add it to the DOM
//
// Check answer
//
$(".gameBtn").click(function(e) {
e.preventDefault();
if ($(this).attr('title') == correctAnswerID) {
$(this).addClass("btn--correct");
$('.btn').not(".btn--correct").addClass("btn--incorrect");
} else {
$(this).addClass("btn--incorrect");
}
});
});
});
<强> DEMO
关于javascript - 使用 jQuery 循环随机 JSON 条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27117281/
情况:我想从数据条目列表导航回我的 PageViewController。 before 和 previous 函数起作用 func pageViewController(pageViewContro
尊敬的 StackOverflow 用户 我有一个 gradle 项目,我想将其工件转换为 osgi 包。在这个包中,我有: 我不想导出的包(可能不会出现在 list 的 Export-Package
我为我的 PendingIntent 设置了一个警报。现在我想在我的 Activity 中显示是否设置了此警报。 Intent service = new Intent(context, MyServ
我有 2 个表、作者和书籍 authors 包含唯一的 IDauthorId 书籍也包含此作为外键 我需要知道书籍数量最多的作者。如果 2 个或更多作者并列最多书籍,我需要显示这两位作者 我已经能够通
我有一个名为 prospective_shop 的表,其中一个列名称是“用户名”。用户名未设置为主键,但我想删除所有具有重复用户名的行。我怎样才能以最快的方式做到这一点? 我尝试执行以下操作: ALT
我现在可以添加条目了。在我的应用程序中,用户可以在他的日历上输入约会/事件。但在他这样做之前,它应该向他显示他已经添加的事件。它应该从日历中获取事件并将其显示给他。这该怎么做?我被困在这部分。提前致谢
#include #include #include #include #include #include char *msg; ssize_t write_proc(struct file
我想将大于 1024 个字符的字符串传递到我的模块(文件系统)。由于内核参数限制为 1024 个字符,someone recommended改为使用 sysfs。 我试图包括 this example
我正在尝试使用 SQLAlchemy 构建以下查询(用作包含查询的子查询,该查询定义名为 tbl_outer 的别名): SELECT max(tbl.ts) AS max_1 FROM tbl WH
假设我有两张 map : Map map1 = Map.of( "a", "1", "b", "2", "c", "3", "x
通过简化示例,假设您有以下数据集: A B C Name Group Amount Dave A 2 Mike B 3 Adam C 4
我正在尝试在我的服务器上创建一个三级域虚拟主机。我希望配置设置正确,但我得到一个 ERR_NAME_NOT_RESOLVED错误。 我已经读到我必须在某处“添加 DNS 条目”以便解析名称,但我该怎么
我需要一个可用于在逗号分隔列表中查找第 N 个条目的正则表达式。 例如,假设此列表如下所示: abc,def,4322,mail@mailinator.com,3321,alpha-beta,43 .
GWT 应用程序(在 Eclipse 中开发)的源代码管理忽略文件中的典型条目是什么? 最佳答案 我会推荐: 你leave the eclipse files (.project, .classpat
我必须创建显示表 (Tbl) 中所有字段的输出,并创建一个额外的列来按月计算每个客户的累计总和(例如,如果客户在 4 月份有两次销售,新列将具有这些销售额和两行中任何先前销售额的总和)。我能做的就这么
文档 ( http://kubernetes.io/docs/user-guide/configmap/ ) 上用于使用值的示例基于 ConfigMap,其中每个数据条目都是一对/值。例子: apiV
我有一个奇怪的错字,我一遍又一遍地犯,而不是实际工作我的打字技巧,我想编辑我的 AutoHotkey 脚本来弥补这一点。 有时,当我输入大写字母时,我会点击:按钮并输入“I:”,我希望 AHK 仅用字
使用 lgdt 初始化 GDT 并将其加载到 GDTR 后,稍后如何更新 GDT? 如果我使用 sgdt 命令获取基地址,然后更新或添加条目,然后使用 lgdt 再次重新加载,我是否正确?还有其他方法
我有两个应用程序共享同一个数据库,即 API 和 MVC5 应用程序。两者都在本地主机上运行良好,但在部署到我的 Azure 帐户时出现此错误 Configuration Error Descrip
我正在尝试修剪我拥有的一些文件。我将为您保存到目前为止我编写的野兽,并通过提供虚构代码使其保持简单。 让我们来看看这个数组: [System.String[]]$Collection = 'Invit
我是一名优秀的程序员,十分优秀!