Question

我有以下HTML和jQuery代码：

HTML

<div id="overlay">
    <button onclick="startEdit()" class="edit_button">Start Editing</button>
</div>

的jQuery

$(".product").click(function() {
    var imageName = $(this).data("image");
    console.log(imageName);
    var imageItem = $("#overlay").append("<div class='product-container'><img class='product-image' src='" + imageName + ".png'></div>");

    var ele = imageItem;

    ele.draggable({});
    // (Theres more than this, but this explains what I'm trying to do)
}

我想要实现的是使用附加元素，在这种情况下，分配给imageItem（div.product-container）的内容，在代码的下方。

我需要做些什么才能使用类似$(this)的内容，因为我需要进一步运行适用于该特定元素的代码。

Answer 1

我想要实现的是使用附加元素，在这种情况下，分配给imageItem（div.product-container）的内容，在代码的下方。

但那不是分配给imageItem的内容; imageItem包含#overlay元素。

相反：

var imageItem = $("<div class='product-container'><img class='product-image' src='" + imageName + ".png'></div>");
$("#overlay").append(imageItem);
// Or:
// imageItem.appendTo("#overlay");

现在imageItem包含div.product-container，您可以在其他地方使用它。

Answer 2

另一种方法是使用.appendTo()

var imageItem = $("<div class='product-container'><img class='product-image' src='" + imageName + ".png'></div>").appendTo('#overlay');

使用append元素作为＆＃34;这个＆＃34; - jQuery

2 个答案: