Javascript 使用数据属性将HTML数据复制到另一个元素

我目前正在建立一个网络商店。主页上的每个产品都使用“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 -->

{产品%%的百分比}
{{product.title}}
{%endfor%}
{{product.title}}//这是应该显示自动产品标题的地方

您可以将弹出式标记放置在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 -->

{产品%%的百分比}
{{product.title}}
{%endfor%}
{{product.title}}//这是应该显示自动产品标题的地方

感谢您的快速回答。但是，如果我按照您的建议将弹出标记放置在for循环中。弹出窗口似乎只呈现循环中第一个产品的产品名称。除此之外，使用数据属性还可以加快渲染时间。for循环中的弹出窗口需要一个唯一的数据弹出窗口，例如产品id

data popup=“#quick_view_product{{{product.id}}”