Question

我需要在选择图像时更新对话框的标题。我在chrome Inspect Element中调试，我对这个值的观察在下面的注释中给出：

function setDialogTitle(item){ // item is input#searchclassimg.imagewrapper
    var id = item.id;  // gives id of selected element
    switch(id){
    // dialog is a div, whose default title is "Some picker"

    case "searchclassimg":
        $('#dialog').attr('title', 'Class Picker'); //after this i expect dialog's title to be updated as "Class Picker"
        break;
    case "searchsectionimg":
        $('#dialog').attr('title', 'Section Picker');
        break;
    case "searchrollnoimg":
        $('#dialog').attr('title', 'Roll No Picker');
        break;
    case "searchnameimg":
        $('#dialog').attr('title', 'Name Picker');
        break;
    }
}
$(document).ready( function() {
                    if (!window.jQuery) {
                        document
                                .write('<link rel="stylesheet" href="/WEB-INF/lib/jquery-ui-themes-1.10.3/themes/smoothness/jquery-ui.css"><\/link>');
                        document
                                .write('<script src="/WEB-INF/lib/jquery-1.10.1.js"><\/script>');
                        document
                                .write('<script src="/WEB-INF/lib/jquery-ui.js"> <\/script>');

                    }
                    var counter = 0;
                    $(".imagewrapper").click(function() {
                                        $("#dialog").dialog();
                                        setDialogTitle(this);
                                        if (counter < 1) {
                                            $("#searchboxdiv").after('<hr id="separator1">');
                                            $("#separator1").after('<div id="contents" class="container"> </div>');
                                            setDialogItems();
                                            counter++;
                                        }
                                    });
                    $(document).on('click', "#searchbutton", function() {
                        var data1 = $("#searchbox").val();
                        $.ajax({
                            url : "FormHandler",
                            data : {
                                data1 : data1
                            },
                            success : function(result) {
                                var result = null;
                            }
                        });
                    });

ImageWrapper是<div>，在其下定义了多个元素。执行后我得到的只是“Some Picker”。如果我犯了错误，请指出。

Answer 1

我假设你标记了这个jQuery和Dialog，你正在使用jQuery UI Dialog小部件。如果是这样，您可以使用对话框中的option功能设置新标题：

$('#dialog').dialog('option', 'title', 'New Title');

所以你的代码会变成：

function setDialogTitle(item){ // item is input#searchclassimg.imagewrapper
    var id = item.id;  // gives id of selected element
    switch(id){
    // dialog is a div, whose default title is "Some picker"

    case "searchclassimg":
        $('#dialog').dialog('option', 'title', 'Class Picker'); //after this i expect dialog's title to be updated as "Class Picker"
        break;
    case "searchsectionimg":
        $('#dialog').dialog('option', 'title', 'Section Picker');
        break;
    case "searchrollnoimg":
        $('#dialog').dialog('option', 'title', 'Roll No Picker');
        break;
    case "searchnameimg":
        $('#dialog').dialog('option', 'title', 'Name Picker');
        break;
    }
}

http://api.jqueryui.com/dialog/#method-option

http://api.jqueryui.com/dialog/#option-title

JQuery：对话框标题未更新

1 个答案: