Question

我正在尝试将图片和文本添加到我的JQuery对话框中，但我遇到了问题，我是JQuery的新手，但似乎无法找到代码的任何问题。任何人对问题是什么有任何想法？

$(function() {
    $( ".dialog" ).click(function(){   
        $('#dialog').append('<img src="Image here"/><br/>').append($(this).html());
        $('#dialog').html("The Football Game ") + $(this).html() + " Is now playing")dialog({
            resizable:true,
            modal:true,
            height: 350,
            width:  500,
            buttons: {
                "Ok": function()
                {
                    $(this).dialog('close');
                },
                "Cancel": function()
                {
                    $(this).dialog('close');
                }
            }
        });
    });
  });

Answer 1

使用您的示例，略微重写。

用于触发对话框的HTML标记：

<div id="dialog" title="Basic dialog">
    <p>Here's some content</p>
</div>
<!-- a HTML element with the class "dialog" to trigger the event -->
<input type="button" class="dialog" value="Trigger Dialog"/>

您的jQuery示例已修改：

$(document).ready(function(){
    $('.dialog').click(function(){ //use a better selector to trigger this event..
    var fetchHTML = $('#dialog').html(); //fetch the current HTML of your element with the ID "dialog" and save it within a variable
    $('#dialog').html('<img alt="" src="someimage.png"/>'+ fetchHTML); // add your image to the element and then the HTML that was there before. The method htm() will overwrite everything that was there before

        $('#dialog').dialog({ //use the jquery-ui dialog method with selected parameters
            resizable : true,
            modal : true,
            height : 350,
            width : 500,
            buttons: {
                "Ok": function(){
                       $(this).dialog('close');
                       },
                "Cancel": function(){
                       $(this).dialog('close');
                       }
                }
           });
       });
  });

请记住确保您已成功包括：

的jQuery
jQuery-ui
jQuery-ui CSS样式表（或至少是您需要的相应类）。

Google为您主办所有活动https://developers.google.com/speed/libraries/devguide。只需将它们复制并粘贴到您的文档中即可轻松实现

每当开发Web应用程序时，我都使用FireFox，并安装了FireBug，WebDeveloper和YSlow等扩展程序。他们非常有帮助:)只是说...

Answer 2

一

我看到的主要问题如下：

$('#dialog').html("The Football Game ") + $(this).html() + " Is now playing")dialog({

在拨打)之前，有一个额外的html()正在关闭.，而您缺少dialog()。

$('#dialog').html("The Football Game " + $(this).html() + " Is now playing").dialog({

两个

此外，您在 html()之后调用append() ，基本上会覆盖附加的内容。在append()之后尝试使用html()（或将所有内容合并到html()来电中）：

$('#dialog') .html('<img src="http://dummyimage.com/600x400/000/fff"/><br/>') .append("The Football Game "+ $(this).html() + " Is now playing") .dialog({ ...

Working Example

无法将文本和图像组合到JQuery对话框中

2 个答案:

一

两个