表格行上的“ jQuery对话框”

Question

我正在使用c＃和razor生成发票清单。 每张发票都是一个表格行，并且有大量的注释清单。 为了避免行之间有大量空间，我想隐藏笔记并允许弹出窗口查看。 目前是：

 <td>
@foreach (var invoiceLine in invoice.InvoiceLines)
                {
                    <p>
                        <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br />
                        @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
                        @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
                        @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "")
                    </p>
                }

所以我想做的是使用jquery添加弹出窗口：

$(function () {

$('#clickMe').click(function (event) {
    var mytext = $('#myText').val();

    $('<div id="dialog">' + mytext + '</div>').appendTo('body');
    event.preventDefault();

    $("#dialog").dialog({
        width: 600,
        modal: true,
        close: function (event, ui) {
            $("#dialog").hide();
        }
    });
}); //close click

}）;

然后修改我的代码：

<td>
            <h3 id="clickMe">Open Notes</h3>
               <textarea cols="1" rows="75" id="myText" style="display:none">
                @foreach (var invoiceLine in invoice.InvoiceLines)
                {
                    <p>
                        <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br />
                        @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
                        @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
                        @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "")
                    </p>
                }
                </textarea>
            </td>

第一个问题是，仅第一行出现。 我想是因为我的ID一直都一样吗？

如何使每一行都打开对话框？

我是c＃和js btw的新手:)

Answer 1

第一：文本区域完全没有意义。

然后像这样更换零件。 看到它在jsfiddle中工作。

的HTML

<td>
@foreach (var invoiceLine in invoice.InvoiceLines)
{

    <p>
        <strong>@invoiceLine.Date.ToShortDateString() @invoiceLine.Username</strong> <br />
        @Html.Raw((invoiceLine.DueDate.HasValue ? "<br /><strong>Follow up:</strong> " + invoiceLine.DueDate.Value.ToShortDateString() : "")) 
        @Html.Raw(invoiceLine.Completed ? "<br /><strong>Completed</strong>" : "")

        <h3 class="notesClick">Open Notes</h3>
        <div class="notesHtml" style="display:none">
          @Html.Raw(invoiceLine.Notes.Replace(Environment.NewLine, "<br />")) 
        </div>

    </p>
}
</td>

JS

$(function() {

    $('.notesClick').click(function(event) {
        var notes = $(event.currentTarget).next('.notesHtml');
        $("<div>").html(notes.html()).dialog();
    });

});​