Javascript 如何动态控制jquery UI对话框？

我干了一整天了。我已经知道了如何动态更改对话框文本，但是，我真的不知道如何让每个学生的名字显示在对话框上，等待用户从“是”或“否”中选择？现在，警报显示for in循环有效，但对话框上的结果不是我想要的

我想调用roll程序来跟踪每个选择并相应地修改Javascript对象

就像对话框中出现的丹尼斯[是或否？]，佐伊[是或否？]等等。。。当用户单击“否”时，JS对象将被修改以反映更改

谢谢你的帮助

$(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    

        }

    });


});

这是我的JSFIDLE：

请看我的小提琴，了解您的解决方案

您的脚本应该如下所示：

$(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

    });




});

---

我想你可以像这样修改代码

$(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.");
    function showDialog(name, callback) {
        return function() {
            $('#dialogText').text('Is ' + name + 'in the class?');
            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:210,
                modal: true,
                buttons: {
                    "Yes": function() {
                        $( this ).dialog( "close" );
                        callback && callback();
                    },
                    "No": function() {
                        $( this ).dialog( "close" );
                        callback && callback();
                    }
                } 
            }); // end of the custom-made confirm button setting
        }
    }

    // click event
    $('#callTheRoll').click(function(){
        var queue = [];
        for (var name in students) {
            queue.push(
                showDialog(name, function() {
                                            var fn = queue.shift();
                                            if (fn) {
                                                fn();
                                            }
                                        }
                )
            );
        }
        var fn = queue.shift();
        if(fn) {
            fn();
        }
    });


});

---

我已经测试过了

因此，您希望使名称循环并保持按钮出现，例如：Carol[是或否？]、Zoe[是或否？]等等？嗨，德里克森，是的，我已经试了一整天了，但是运气不好。好吧，让我把它放在小提琴里！多谢各位。这几乎就是我想要的，如果我只需单击“点名”按钮一次，然后对话框从头到尾一个接一个出现。那太好了！但是你帮了我很大的忙，我会想办法让它变得完美！我很高兴帮助你：），我也在学习。刚发现你的工作很有趣。别忘了给它标上答案。谢谢天哪，凯涵，你真的救了我一天！谢谢你的解决方案！这是一个完美的解决方案，正是我想要的。再次感谢您的帮助！你的代码很难理解，我完全无法理解。我很荣幸能帮助你：）！