javascript - 如何从多个元素中选择一个元素克隆到单独的部分？ (对其进行硬编码，以节省时间和资源)

Question

我希望这有意义，因为我不能使用 JS fiddle ，因为它不支持 C# 模型(至少我不知道)。基本上，当选择该产品时，我试图将一个 div 中的产品克隆到另一个 div。

这是 html 和 c#:

<%
    var i = 0; 
    foreach (var product in Model.Products)
    {
%>

        <li class="l-row__item" id="product<%=i %>" >

        <div> 
            Contains styling like photos, product titles, etc. I don't think you'll need this information, its super long.
        </div>

        </li>
<%
        i++;
    }
%>

我的脚本:

$("#product1").on("click", function () {
    var offercart = $("#product1").clone();
    $("#offer-grid").append(offercart);
});

正如您所看到的，我转动了所有的 li，以便它们具有诸如产品 1 之类的 ID。现在，如果我单击产品 1(或者实际上是它的两个，但大家都知道)，它会将产品 1 克隆到另一个 div。然而，有超过 50 种产品。所以我知道必须有一种更简单的方法，而不是一遍又一遍地复制和粘贴这段代码。

我是初学者，所以如果答案很明显，我很抱歉。我为自己在没有帮助的情况下走到这一步感到自豪! (后端 friend 做了 C# 的东西，我只做了 jQuery 和 JS!)如果有人能告诉我从哪里开始，给我一个提示或者给我一个 JS Fiddle 的例子作为指导，我将非常感激。我真的很喜欢学习 JavaScript，并希望有一天能够为这个很棒的社区做出贡献!

此外，如果其他人已经回答了这个问题，请链接我，我会尽快删除它。我尝试了各种搜索词，但没有找到匹配的词，但我可能用词错误。

Answer 1

您应该使用Class Selector (".class") ，在示例中我添加了 product css 类

恕我直言，您可以在 data-* 属性中存储一些信息，例如产品 ID。

<%foreach (var product in Model.Products){%>

    <li class="l-row__item product" data-product-id="<%= product.id %>">
        <div> Contains styling like photos, product titles, etc.
        I don't think you'll need this information, its super long.</div>
    </li>

<%} %>

脚本:

$(".product").on("click", function () {
    var offercart = $(this).clone();
    var productid = $(this).data('product-id');
    $("#offer-grid").append(offercart);
});