使用数据属性将HTML数据复制到另一个元素
Copy HTML data to another element using data-attributes
我目前正在构建一个网店。主页上的每个产品都会使用"for"循环自动呈现在一个框中。我在每个产品框上都创建了一个预览按钮,这样访问者在想要产品的详细信息时就不会收到主页。通过点击预览按钮,弹出窗口应显示产品名称(以及更多信息)。
基本上,我希望在相应产品的弹出框中复制动态文本{product.title}。
最好的管理方法是什么?这是通过使用数据属性实现的吗?
<!-- PRODUCT SECTION -->
<section id="Portfolio" class="clearfix portfolio {{ theme.product_display }}">
{% for product %}
<article class="portfolio-product">
<figure class="portfolio-productimage">
<a href="{{ product.url | url }}">
<img src="{{ product.image | url_image(product.title) }}" class="img-responsive" alt="{{ product.title }}">
<span role="button" data-popup="#quick_view_product" class="button_type_5 box_s_none color_light r_corners tr_all_hover d_xs_none">Quick View</span>
</a>
</figure>
<div class="portfolio-producttitle">
<h3>{{ product.title }}</h3>
</div>
</article>
{% endfor %}
</section>
<!-- END PRODUCT SECTION -->
<!-- PRODUCT POPUP -->
<div class="popup_wrap d_none" id="quick_view_product">
<section class="popup r_corners shadow">
<button class="bg_tr color_dark tr_all_hover text_cs_hover close f_size_large"><i class="fa fa-times"></i></button>
<div class="clearfix">
<div class="full_column">
<h2 class="m_bottom_10">{{ product.title }}</h2> // THIS IS WHERE THE AUTOMATED PRODUCT TITLE SHOULD BE DISPLAYED
</div>
</div>
</section>
</div>
<!-- END PRODUCT POPUP -->
您可以将弹出标记放置在for循环中,并使用for中的变量,也可以使用数据矩阵,将循环标记中的数据传递给弹出标记。
与在循环中放置弹出标记相比,数据的前卫之处在于页面上的标记较少->小html页面->快速渲染时间
谢谢Madalin!你成就了我的一天。我已经找了两天的答案了。
这里是工作标记:
<!-- PRODUCT SECTION -->
<section id="Portfolio" class="clearfix portfolio {{ theme.product_display }}">
{% for product %}
<article class="portfolio-product">
<figure class="portfolio-productimage">
<a href="{{ product.url | url }}">
<img src="{{ product.image | url_image(product.title) }}" class="img-responsive" alt="{{ product.title }}">
<span role="button" data-popup="#quick_view_product_{{ product.id }}" class="button_type_5 box_s_none color_light r_corners tr_all_hover d_xs_none">Quick View</span>
</a>
</figure>
<div class="portfolio-producttitle">
<h3>{{ product.title }}</h3>
</div>
</article>
{% endfor %}
</section>
<!-- END PRODUCT SECTION -->
<!-- PRODUCT POPUP -->
<div class="popup_wrap d_none" id="quick_view_product_{{ product.id }}">
<section class="popup r_corners shadow">
<button class="bg_tr color_dark tr_all_hover text_cs_hover close f_size_large"><i class="fa fa-times"></i></button>
<div class="clearfix">
<div class="full_column">
<h2 class="m_bottom_10">{{ product.title }}</h2> // THIS IS WHERE THE AUTOMATED PRODUCT TITLE SHOULD BE DISPLAYED
</div>
</div>
</section>
</div>
<!-- END PRODUCT POPUP -->
相关文章:
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何将键入的文本从一个输入类型的文本复制到另一个
- 使用数据属性将HTML数据复制到另一个元素
- 可以't无法将一个字段复制到另一个字段
- jQuery将文本从span标记复制到另一个span标记
- 当我将子项从一个父项移动/复制到另一个父级时,如何重新计算显示
- 如何通过 JS 将内容从一个表单中的一个文本框复制到另一个表单中的另一个文本框
- 将搜索按钮从一个站点复制到另一个站点:此搜索按钮如何工作,以及如何重现其操作
- 如何使用谷歌应用程序脚本将3个谷歌电子表格中的特定行复制到另一个电子表格中
- Gulp.js - 无法将生成的文件从一个文件夹复制到另一个文件夹
- 当文档准备就绪时,将数据从一个文本框复制到另一个
- 将DIV内容复制到另一个DIV
- EXTJS 4.2:点击按钮,在新窗口中将选定的网格行从一个网格复制到另一个网格
- 如何在MVC3剃刀中将文本框值复制到另一个文本框中
- 是否可以将一个DOM元素转换为另一个?或者从中复制所有属性
- 两个表单,一个选择/下拉框-需要将选择值从一个表单复制到另一个表单
- 读取/写入/复制一个 ArrayBuffer 到另一个具有偏移量的 ArrayBuffer
- 将html输入文件元素从一个表单复制到另一个表单
- HTML将图像从画布复制到另一个画布
- 实时复制另一个文本框值 Jquery