Question

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

我想调用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/

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

2 个答案: