JQuery .append() 分离元素答案

【问题标题】：JQuery .append() Separate ElementsJQuery .append() 分离元素
【发布时间】：2012-02-27 07:02:16
【问题描述】：

我制作了一个脚本，将图像和文本框添加到画布。为了让文本框出现在图像上，我需要将 CSS 应用于图像。因此，我将 div 分开，<img> 用于图像，<text> 用于文本。

这会产生两个问题。当我首先添加图像和文本时，这两个元素被认为是分开的，我只能拖动图像或文本，而不是同时拖动两个元素。此外，当我添加另一个图像和另一个文本框时，两者不会出现在彼此之上，而是在文本框旁边生成文本，在图像旁边生成图像。

所以我的问题是这样的。是否可以将这两个元素合并为一个元素，并在生成时让它们这样做，让它们每次都以相同的方式进行？

这是我为它制作的 Javascript。

$(document).ready(function() {
$("#img").draggable();
$("#text").draggable();
});

function addEvent() {
$("#img").append("<img src='Sticky_Note.png'</a>")
$("#text").append(" <textarea name='comments' x-webkit-speech='x-webkit-speech'style='width:380px;height:300px; background: none; border:none; font-size:24px; color:#0033FF;font-family:comic sans ms' />")

}

如果这还不够信息（我很抱歉，对不起），我已经附上了一个前沿链接here.

感谢您的帮助！

【问题讨论】：

<img src='Sticky_Note.png'</a> 是无效的 HTML，无论如何也没有多大意义。
谢谢！我解决了图片的问题。

标签： javascript jquery html append

【解决方案1】：

尝试在图像和文本元素周围创建一个包装器 <div>，例如<div id="#wrapper">。然后您可以执行以下操作：

$('#wrapper').draggable();

您的 addEvent 代码如下所示：

function addEvent() {
    $("#wrapper").append("<img src='Sticky_Note.png'</a>");
    $("#wrapper").append(" <textarea name='comments' x-webkit-speech='x-webkit-speech'style='width:380px;height:300px; background: none; border:none; font-size:24px; color:#0033FF;font-family:comic sans ms' />");  
}

【讨论】：

【解决方案2】：

您的实施存在一些问题，我将忽略基本文档问题，因为我认为您正在整理一个简单的示例:)

当您附加一个新的“注释”时，它不是单独可移动的，而是可移动的容器，因此它们只是堆叠起来，因为您只是向软木板容器添加更多内容，即：另一个 textarea/image，然后是另一个 textarea /图像。

我已经在 pastebin here 上提出了一个解决方案，请随时查看，希望它可以帮助您指明正确的方向。

其实，我也会嵌入它，以供后代使用

<!DOCTYPE html>
<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <style>
        #corkboard { position: relative; }
        #corkboard textarea { position: absolute; width: 380px; height: 300px; top: 100px; left: 60px; background: none; border: none; font-size: 24px; color: #03f; font-family: 'comic sans ms', serif; }
        #corkboard img { position: absolute; }

        .corkboard-item {
            position: absolute;
            float: left;
            width: 500px;
            height: 500px;
        }
    </style>

    <script>
        $( document ).ready( function() {
            // Create our corkboard item
            //
            $corkboard_item = $( '<div></div>' );
            $corkboard_item
                .addClass( 'corkboard-item' )
                .append( '<img src="http://www.bookofsam.com/corkboard/Sticky_Note.png" />' )
                .append( '<textarea name="comments" x-webkit-speech="x-webkit-speech">Enter your note</textarea>' );

            // Counter goodness
            $x = 1;


            // Make sure the one we click is always at the top
            //
            $( 'img, textarea' ).live( 'click', function( e ) {
                e.preventDefault();

                $( '.corkboard-item' ).each( function() {
                    $( this ).css({ 'z-index':1 });
                });

                $( this )
                    .parent()
                    .css({
                        'z-index':2
                    })
            });


            // Add one when we click the button
            //
            $( 'a.add-item' ).live( 'click', function( e ) {
                e.preventDefault();

                var item = $corkboard_item.clone();
                $( item )
                    .find( 'textarea' )
                    .attr({
                        'name' : ( 'comment-' + $x )
                    });

                $x++;

                $("#corkboard").append( $( item ).draggable() );
            });
        });
    </script>
</head>
<body>
    <p>CORKBOARD TEST - 0.8.555 </p>

    <a href="#" class="add-item"><img src='http://www.bookofsam.com/corkboard/Note_Scale.png' align="right" /></a>

    <div id="corkboard"></div>
</html>

仔细想想，我真的应该把“笔记”图像作为背景图像放在“软木板项目”上。

nbsp;

【讨论】：