Question

我有一个包含大量文字输入的表格，如下所示： alt text http://img380.imageshack.us/img380/6697/snapsh.png

（它们是少数学生考试的标志）。

每个字段都有一个用于添加注释的关联图标，因此单击该图标时，必须使用textarea显示一个对话框，然后将其值保存到隐藏的输入中。

标记字段的示例：

<input class="num" type="text" size="2" value="5.69" name="calif[57][6]"/>
<a id="57_6" class="addObs" title="Add comment" href="#">
<img alt="Add" src="http://localhost/xxx/assets/img/comment.png"/>
</a>

每个链接都使用studentID_itemID

标识

这是我编码的内容，但根本不起作用。

var opciones = {
        title: 'Add comment',
        modal: true,
        buttons: {
            OK: function() {
                $(this).dialog('close');
                x = $('#obserText').val();
                $('#obser' + id).val(x);

            }
        }
    };

    $('.addObs').click(function(){
        x = this.id.split('_');
        y = '[' + x[0] + '][' + x[1] + ']';

        // If the hidden file exists, show its value
        // It should show the dialog again to allow edit the comment, but I'll leave it until later
        if (document.getElementById('obser' + y))
        {
            alert ($('#obser' + y).val());
        }
        //If not...
        else
        {
            //Create it
            $(this).parent().prepend('<input type="hidden" id="obser' + y + '"/>');

            //Show the dialog
            dialog = $('<div></div>')
                .html('<textarea id="obserText"></textarea>')
                .dialog(opciones);


        }

我不知道如何传递ID以将注释保存到其隐藏的输入中。

提前致谢并抱歉我的英文

Answer 1

通过以下修改进行测试：

var opciones = {
        title: 'Add comment',
        modal: true,
        buttons: {
            OK: function() {
                $(this).dialog('close');
                x = $('#obserText').val();
                $('#obser' + id).val(x);
            }
        }
};

$('.addObs').click(function(){

  var id = this.attr("id");
  var x = id.split('_');
  var y = '[' + x[0] + '][' + x[1] + ']';

  // If the hidden file exists, show its value
  // It should show the dialog again to allow edit the comment, but I'll leave it until later
  if ($('#obser_' + id).length>0)
  {
    alert($('#obser_' + id).val());
  }
  else  //If not...
  {
    //Create it
    $(this).parent().prepend("<input type=\"hidden\" id=\"obser_" + id + "\" />");

    //Show the dialog
    if ($("#obserText").length>0)
      $("#obserText").remove();     

    var xdialog = $("<div></div>").html("<textarea id=\"obserText\"></textarea>");
    xdialog.dialog(opciones);
  }
}

Answer 2

我想我已经知道了，带括号的id是一个坏主意。我已正确重命名x和y：D

var raw_id, split_id;

    var options = {
        title: 'Add comment',
        modal: true,
        buttons: {
            OK: function() {
                $(this).dialog('close');
                valor = $('#otext' + raw_id).val();
                $('#obser' + raw_id).val(valor);
                //console.log($('#obser' + raw_id).val());
                if (valor)
                {
                    $('a#' + raw_id).find('img').attr('src', base_url + 'assets/img/observacion_on.png');
                }
                else
                {
                    $('a#' + raw_id).find('img').attr('src', base_url + 'assets/img/observacion.png');
                }

            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    };    

    $('.addObs').click(function(){

        raw_id = this.id;
        split_id = raw_id.split('_');
        prep_id = '[' + split_id[0] + '][' + split_id[1] + ']';


        if ($('#obser' + raw_id).length > 0)
        {
            //console.log($('#obser' + raw_id).val());
            var dlg = $('<div></div>').html('<textarea id="otext' + raw_id + '">' + $('#obser' + raw_id).val() + '</textarea>');
            dlg.dialog(options);

        }
        else
        {
            $(this).parent().prepend('<input type="hidden" id="obser' + raw_id + '" name="obser' + prep_id +'" />');

            var dlg = $('<div></div>').html('<textarea id="otext' + raw_id + '"></textarea>');
            dlg.dialog(options);
        }
    });

但现在编辑评论不起作用

使用多个jquery-ui对话框

2 个答案: