[英]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中的变量,也可以在汇总时使用data-attributes将数据从循环标记传递到popup。
与将弹出窗口标记放置在循环中相比,数据属性的优势在于页面上的标记更少->小html页面->快速渲染时间
感谢Madalin! 你让我今天一整天都感觉很好。 我一直在寻找答案的2天。
这里的工作标记:
<!-- 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 -->
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.