使用谷歌应用程序脚本在我的学校构建一个简单的工具,以帮助收集学生作业的照片证据并集中保存,以便所有教学人员都可以访问它(可能已经有一个应用程序可以做到这一点,但我认为它可能是一个非-学习更多编码的复杂而有用的方法)。
我遇到的问题是异步加载的复选框(基于学生电子表格中的数据)没有设置样式。如果我使用动态代码生成的样式对一些示例复选框进行硬编码,则样式将完美应用(请参阅此屏幕截图以了解差异)
这是我用来执行此操作的代码片段...
触发生成复选框的函数
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
$(function() {
google.script.run.withSuccessHandler(showLearners)
.getLearnerData();
});
//Please note the getLearnerData() code works fine, so won't show that
显示学习者脚本 这嵌入在页面末尾。
function showLearners(learners) {
//split learners into staff and students
var learnersObj = {staff:[], students:[]}
//var staff = [];
//var students = [];
for (var i=0; i<learners.length; i++) {
if (learners[i][3] === "student" || learners[i][3] === '') {
learnersObj.students.push(learners[i]);
} else {
learnersObj.staff.push(learners[i])
}
}
var roles = ["staff", "students"];
var cols=['a','b','c'];
var r = 0;
//This loop creates checkboxes for students and then staff
while(r < roles.length) {
var role = roles[r];
var rowCount = 1;
var learnerCheckboxes = $('#' + role);
//This loop creates the fieldset groups
for (var i = 0; i < learnersObj[role].length; i++) {
learnerCheckboxes.append("<fieldset id=\"checkRow" + role + rowCount + "\">")
var fieldSet = $("#checkRow" + role + rowCount).addClass("ui-grid-b");
//This loop creates 3 checkboxes in each grid of the fieldset
for (var j = 0; j < cols.length; j++) {
var learnerID = learnersObj[role][i][0];
fieldSet.append("<div id=\"checkRow" + role + rowCount + "-" + cols[j] + "\">");
var div = $("#checkRow" + role + rowCount + "-" + cols[j]).addClass("ui-block-" + cols[j]);
div.append(
"<input type=\"checkbox\" name=\"learner\" id=\"learner" + role + i + "\" data-mini=\"true\"/>" +
"<label for=\"learner" + role + i + "\">" + learnerID + "</label>"
);
if (j < (cols.length-1)) {
i++;//we're in the inner loop, so have to manually increment i, but not if we're near the end
}
if (i >= learnersObj[role].length) {
break;
}
}
fieldSet.trigger("create");
rowCount++;
}
r++;
}
$('#loader').hide();
$('#photoForm').show();
$('#staff').hide();
console.log("Learners loaded")
} //end showLearners()
此代码生成下面的输出(仅显示一行),与 jquery 演示相匹配(此处):
<fieldset id="checkRow1" class="ui-grid-b">
<div id="checkRow1-a" class="ui-block-a">
<input type="checkbox" name="learner" id="learner0" data-mini="true">
<label for="learner0">David</label>
</div>
<div id="checkRow1-b" class="ui-block-b">
<input type="checkbox" name="learner" id="learner1" data-mini="true">
<label for="learner1">Dominic</label>
</div>
<div id="checkRow1-c" class="ui-block-c">
<input type="checkbox" name="learner" id="learner2" data-mini="true">
<label for="learner2">Eliza</label>
</div>
</fieldset>
我猜测问题与时间有关 - 即因为这些复选框是在页面加载后添加的,所以嵌入的 jquery-mobile 样式表中的一些样式没有被应用。我本来希望使用 jquery 函数添加样式(.addclass())能够解决这个问题,但事实并非如此。
提前感谢您的帮助