Jquery 创建一个带有图像的 div 元素。无法在上面写文字 - JQUERY

Question

我正在使用 Jquery 在点击功能上创建 div 元素。还具有可拖动和可调整大小的属性。 div 会按预期生成带有背景图像。

我也在尝试使用 $("#box").html("Test") 在其上附加文本。但这会导致框内无法获得 resizable 或 draggable.

这是我的CSS：

<style>
#mover {
        border: 2px solid;
        padding: 10px 40px;
        width: 300px;
        /*resize: both;*/
        /*overflow: auto;*/
    }

    .comp1 {
        border: 2px solid;
        width: 100px;
        height: 100px;
        position: absolute;
        background-image: url("Images/florist.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    .comp2 {
        border: 2px solid;
        width: 100px;
        height: 100px;
        position: absolute;
        background-image: url("Images/caterer.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        border-radius:50%;
    }

</style>

脚本：

<script>
        $(function () {
            $(document).ready(function () {
                $("#AddComp").click(function () {
                    $("#box").append("<div class='comp1'></div>");
                    $("#box").html("TEst");
                    $("#box .comp1").resizable({ containment: "#box" });
                    $("#box .comp1").draggable({ containment: "#box" });
                });

                $("#circle").click(function () {
                    $("#box").append("<div class='comp2'></div>");
                    $("#box .comp2").resizable({ containment: "#box" });
                    $("#box .comp2").draggable({ containment: "#box" });
                });

            });
        });
    </script>

HTML :

 <a id="AddComp">Square</a>
    &nbsp;&nbsp;&nbsp;&nbsp;<a id="circle">Circle</a>

    <div id="box" style="border:double;min-height:700px;min-width:900px">


    </div>

P.S。：我想在创建的 div 上附加文本 jquery 或 css 。

Answer 1

这条语句执行时

$("#box").html("Test");

您正在破坏之前在 #box 元素中创建的 .comp1 元素（.comp2 元素存在同样的问题）。也许你可能想要

$("#box .comp1").text("Test");

作为旁注，缓存您的选择器，尤其是当您需要多次使用它们时，或者链接这些方法以避免对 jQuery 函数的无用（昂贵）调用

Answer 2

您没有使框可调整大小或可拖动。您正在对它的某些后代（.comp1 和 .comp2 元素）执行此操作。

当您 $("#box").html("Test") 时，您将删除这些元素并用文本节点替换它们。

您需要执行以下操作之一：

修改那些元素的内容而不是整个框的内容
append() 新内容，因此它不会删除旧控件
将新元素放入框中而不是简单的文本字符串，select 新元素，然后使它们可调整大小和拖动

Answer 3

您必须将文本添加到 .comp1

 $("#box .comp1").html("Test")

Jquery 创建一个带有图像的 div 元素。无法在上面写文字 - JQUERY

Jquery which creates a div element with Image on it. Cannot write Text on it - JQUERY

html

css

jquery

jquery-ui