我已经讨论这个问题一整天了。我已经弄清楚如何动态更改对话框文本,但是,我真的不知道如何使每个学生的姓名显示在对话框上,等待用户选择"is"或“否”?现在警报显示 for in 循环有效,但对话框上的结果不是我想要的。
我想调用滚动程序来跟踪每个选择并相应地修改 Javascript 对象。
就像在对话框中出现 Dennis [ yes or no ?] 、 Zoe [ yes or no?] 等等...当用户单击“no”时,JS 对象将被修改以反射(reflect)更改。
感谢各位好心人的帮助。
$(document).ready(function(){
var students = {
"dennis":true,
"zoe":true,
"ken":true,
"carol":true
};
// a function to count elements in an JS object
function countObject(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
// get the number of elements in an object
var studentTotal = countObject(students);
// display the initial text on the page
$('#totalStudent').text("Our class has " + studentTotal + " students in total.");
// click event
$('#callTheRoll').click(function(){
// use a for loop to call everyone in the object
for(var element in students){
alert("Is " + element + " in class?");
$('#dialogText').text("Is " + element + " in class?");
// pop up the dialog
$( "#dialog-confirm" ).dialog({
resizable: false,
height:210,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
}); // end of the custom-made confirm button setting
}
});
});
这是我的jsfiddle: http://jsfiddle.net/dennisboys/TtJdC/1/
最佳答案
请看我的 fiddle jsfiddle.net/G6FXe/1/为您提供解决方案。
你的脚本应该是这样的:
$(document).ready(function(){
//Make the object in array
var students = [
{"name" : "dennis", "class" : true},
{"name" :"zoe" , "class":true},
{"name" :"ken", "class":true},
{"name" :"carol", "class":true}
];
// get the numbers of students
var studentTotal = students.length;
// display the initial text on the page
$('#totalStudent').text("Our class has " + studentTotal + " students in total.");
click_counter = 0;
// click event
$('#callTheRoll').click(function(){
// alert("Is " + element + " in class?");
if(click_counter >= studentTotal){
click_counter = 0; //if all process you can reset the counter to run the students again
}
// set element on what object
element = students[click_counter].name;
$('#dialogText').text("Is " + element + " in class?");
// pop up the dialog
$( "#dialog-confirm" ).dialog({
resizable: false,
height:210,
modal: true,
buttons: {
"Yes": function() {
students[click_counter].class = true;
click_counter++;
$( this ).dialog( "close" );
//alert(JSON.stingify(students));
},
"No": function() {
students[click_counter].class = false;
click_counter++;
$( this ).dialog( "close" );
alert(JSON.stringify(students));
}
}
}); // end of the custom-made confirm button setting
});
});
关于javascript - 如何动态控制 jquery UI 对话框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18093791/