如何将图片添加到 JQuery 对话框框中

Question

你好，我在尝试向我的对话框添加图片时遇到了问题。基本上，我的对话框是在用户单击表格中的单元格时调用的。

    <td class="dialog">English</td>

然后将其链接到Div

<div id="dialog" title="LessonSelected">

</div>

接下来是我的 JQuery 代码：

$(function() {
    $( ".dialog" ).click(function(){        
        $('#dialog').html($(this).html()); 
        $('#dialog').dialog({
            resizable:false,
            buttons: {
                "Enrol": function()
                {
                    $(this).dialog('close');
                    choice(true);
                },
                "Cancel Enrol": function()
                {
                    $(this).dialog('close');
                    choice(false);
                }
            }
        });
    });
  });

然而，当我尝试在div中添加img标记时，图像出现在界面上而不是对话框中。另外，当单击单元格时，单元格内的文本会自动显示在对话框中，这并不是所需的。虽然我确实想要获取该值，但它仅会自动显示，并且由于我对JQuery还很陌生，我不知道如何格式化它或在其前后添加其他文本。有人能够诊断我的问题吗？

- user2871847

---

如果我理解正确，当我点击“英语”时，会弹出一个对话框，并且对话框中会显示“英语”这个单词？它会显示在哪里？这只有在您向对话框添加了图像时才会发生？ - Dean.DePue

忘了问，您是根据点击的单元格动态添加图像吗？ - Dean.DePue

如果您能添加一个fiddle，以便我们可以查看问题，那就太好了。 - Banana

首先，$('#dialog').html($(this).html());这一行代码将单元格的内容复制到对话框div中...其中$(this)是您点击的单元格，调用了该函数。 - Banana

我认为你的jQuery代码没有问题http://jsfiddle.net/q4m68/，唯一的问题是它将类名为dialog的文本添加到id为dialog的div中，而不是添加图片。 - designtocode

是的，就像 msbodetti 所说的那样，除了你的示例与图像无关之外，代码似乎运行得很好。不过我稍微修改了一下，将 .html() 链接到对话框实例的末尾。$("#dialog").dialog(...).html($(this).html()); - IrishGeek82

Answer 1

请查看这个Demo Fiddle：使用jQuery的.append()

$(function() {
    $( ".dialog" ).click(function(){ 

        $('#dialog').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>').append($(this).html());

       //append image through JS

        $('#dialog').dialog({
            resizable:false,
            buttons: {
                "Enrol": function()
                {
                    $(this).dialog('close');
                    choice(true);
                },
                "Cancel Enrol": function()
                {
                    $(this).dialog('close');
                    choice(false);
                }
            }
        });
    });
  });

或者

<div id="dialog" title="LessonSelected">
    <span><img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/></span>
</div>

- Shaunak D

---

太好了！很抱歉我错过了之前的问题。 - caspian

太棒了，谢谢！ - user2871847

Answer 2

创建对话框autoOpen = false，然后在单击时打开它。

HTML

<div id="dialog" class="dialogBox" title="LessonSelected">
    <img src="https://www.google.com/logos/2014/worldcup14/opening/cta.png" />
</div>

JQuery

$(function() {

    $('#dialog').dialog({
        resizable:false,
        autoOpen: false,
        buttons: {
            "Enrol": function()
            {
                $(this).dialog('close');
                choice(true);
            },
            "Cancel Enrol": function()
            {
                $(this).dialog('close');
                choice(false);
            }
        }
    });

  $( ".dialog" ).click(function(){        
    $('#dialog').dialog("open");
  });
});

FIDDLE: http://jsfiddle.net/F9uR3/

- caspian

---

这绝对是我需要的答案，我只是想知道在图像后如何将文本读取到单元格的选择中？ - user2871847