如何從多個元素中選擇一個元素克隆到單獨的部分？ （讓它工作硬編碼，希望節省時間和資源）

Question

我希望這有意義，因為我不能使用JS小提琴，因為它不支持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都轉了，所以他們有ID，比如產品1.現在，如果我點擊產品1（或實際上是它的兩個，但你們都知道），它會將產品1克隆到另一個div。 但是，有超過50種產品。 所以我知道，而不是一遍又一遍地復制和粘貼這些代碼必須有一個更簡單的方法。

我是初學者，所以如果答案顯而易見，我很抱歉。 我為自己在沒有幫助的情況下取得這一成就感到自豪！ （后端朋友做了C＃的東西，我只是做jQuery和JS！）如果有人能告訴我從哪里開始，提示或給我一個JS小提琴的例子作為指導我會非常感激。 我真的很喜歡學習JavaScript，希望有一天能夠為這個令人敬畏的社區做出貢獻！

此外，如果這已經被其他人回答，請鏈接我，我會盡快刪除。 我嘗試了各種搜索術語，但沒有找到匹配的但是我本來可以寫錯了。

Answer 1

試試 -

$(".l-row__item").on("click", function () {
var offercart = $(this).clone();

將適用於每一行項目。

Answer 2

你應該使用類選擇器（“.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);
});