如何動態控制jquery UI對話框？

Question

我整整一天都在這。 我已經想出了如何動態更改對話框文本，但是，我真的不知道如何在對話框中顯示每個學生名稱，等待用戶選擇“是”或“否”？ 現在警報顯示for in循環工作，但對話框上的結果不是我想要的。

我想調用roll程序來跟蹤每個選擇並相應地修改Javascript對象。

就像在對話框中一樣，它出現在Dennis [是或否？]，Zoe [是或否？]等等......當用戶點擊“否”時，將修改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    

        }

    });


});

這是我的jsfiddle： http ： //jsfiddle.net/dennisboys/TtJdC/1/

Answer 1

請參閱我的小提琴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

    });




});

Answer 2

我想你可以改變這樣的代碼。

$(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();
        }
    });


});

我測試了它。 http://jsfiddle.net/TtJdC/2/