[英]How can I choose one element out of multiple to clone into a separate section? (Have it working hard coded, looking to save time and resources)
I hope this will make sense since I can't use a JS fiddle because it doesn't support C# Models (at least not that I can tell). 我希望这有意义,因为我不能使用JS小提琴,因为它不支持C#模型(至少不是我能说的)。 Basically I am trying to clone a product in one div to another div when that product is selected.
基本上,当我选择该产品时,我试图将一个div中的产品克隆到另一个div。
Here is the html and c#: 这是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++;
}
%>
My script: 我的剧本:
$("#product1").on("click", function () {
var offercart = $("#product1").clone();
$("#offer-grid").append(offercart);
});
So as you can see, I turned all the li's so they have IDs such as product 1. Now if I click product 1 (or actually its two but you all know that) it will clone product one to the other div. 所以你可以看到,我把所有的li都转了,所以他们有ID,比如产品1.现在,如果我点击产品1(或实际上是它的两个,但你们都知道),它会将产品1克隆到另一个div。 However, there are over over 50 products.
但是,有超过50种产品。 So I know instead of copying and pasting this code over and over there has to be an easier way.
所以我知道,而不是一遍又一遍地复制和粘贴这些代码必须有一个更简单的方法。
I'm a beginner so I'm sorry if the answer is obvious. 我是初学者,所以如果答案显而易见,我很抱歉。 I was proud of myself for getting this far without help!
我为自己在没有帮助的情况下取得这一成就感到自豪! (Backend friend did the C# stuff, I just do the jQuery and JS!) If someone could tell me where to begin, a hint or give me an example in JS Fiddle as a guide I'd be so grateful.
(后端朋友做了C#的东西,我只是做jQuery和JS!)如果有人能告诉我从哪里开始,提示或给我一个JS小提琴的例子作为指导我会非常感激。 I'm really enjoying learning JavaScript and hope to be able to contribute to this awesome community one day!
我真的很喜欢学习JavaScript,希望有一天能够为这个令人敬畏的社区做出贡献!
Also if this has already been answered by someone else please link me and I'll delete this asap. 此外,如果这已经被其他人回答,请链接我,我会尽快删除。 I tried all kinds of search terms but didn't find one that matched but I could have been wording it wrong.
我尝试了各种搜索术语,但没有找到匹配的但是我本来可以写错了。
Try - 试试 -
$(".l-row__item").on("click", function () {
var offercart = $(this).clone();
Will do apply to every row item. 将适用于每一行项目。
You should use Class Selector (".class") , In example I have added product
css class 你应该使用类选择器(“.class”) ,例如我添加了
product
css类
IMHO, you can store some information like product id in data-*
attributes. 恕我直言,您可以在
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>
<%} %>
script: 脚本:
$(".product").on("click", function () {
var offercart = $(this).clone();
var productid = $(this).data('product-id');
$("#offer-grid").append(offercart);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.