价格 Alert:How 以将价格产品从产品列表传递到弹出窗口？

Question

我有一个特定产品的列表，对于每个产品，我都有一个按钮 创建价格提醒。当我单击该按钮时，会出现一个包含价格的弹出窗口当前产品的数量：

<link href="{{ asset('../web/main.css') }}" rel="stylesheet">

<h1>Products</h1>
<table border="1">
    <tr>
        <td>Name</td>
        <td>Image</td>
        <td>Brand</td>
        <td>Category</td>
        <td>URL</td>
        <td>Shop</td>
    </tr>
    {% for product in products %}
        <tr>
            <td>{{product.name}}</td>
            <td><img src="{{product.image}}" ></td>
            <td>{{product.brand}</td>
            <td>{{product.category}}</td>
            <td>{{product.url}}</td>
            <td>{{product.shop}}</td>
            <td><div class="box"><a class="button" href="#popup1">Create a price Alert</a></div>
   </td>
        <div id="popup1" class="overlay">
            <div class="popup">

                <h4>We will keep you updated</h4>
                <h4>Actual Price</h2> ???<br>       <a class="close" href="#">&times;</a>
                    <h4>Desired amount</h4><input type="text" name="montant_souhaite" ><br>

            </div>
        </div>

    </tr>  

{% endfor %}    

</table>

Answer 1

您是使用库来处理弹出窗口，还是使用自定义 JS？

如果这是自定义 JS，有很多方法可以做到这一点，其中之一是向包含价格的 <tr> 添加一个 "data-price" 属性，然后添加一个 "price" class 到弹出窗口中围绕价格的 <span> 标签。

然后，您可以这样做，例如：

$('.box button').on('click', function(){
      $('#popup1 .price').html($(this).parents('tr').first().data('price'));
   }
);

您的 html 看起来像这样：

<link href="{{ asset('../web/main.css') }}" rel="stylesheet">

<h1>Products</h1>
<table border="1">
    <tr>
        <td>Name</td>
        <td>Image</td>
        <td>Brand</td>
        <td>Category</td>
        <td>URL</td>
        <td>Shop</td>
    </tr>
    {% for product in products %}
        <tr data-price='{{ product.price }}'>
            <td>{{product.name}}</td>
            <td><img src="{{product.image}}" ></td>
            <td>{{product.brand}</td>
            <td>{{product.category}}</td>
            <td>{{product.url}}</td>
            <td>{{product.shop}}</td>
            <td><div class="box"><a class="button" href="#popup1">Create a price Alert</a></div>


            </td>
        <div id="popup1" class="overlay">
            <div class="popup">

                <h4>We will keep you updated</h4>
                <h4>Actual Price</h2> <span class='price'>???</span><br>       <a class="close" href="#">&times;</a>
                    <h4>Desired amount</h4><input type="text" name="montant_souhaite" ><br>



            </div>
        </div>

    </tr>  


{% endfor %}    

</table>

如果您使用的是库，请参阅文档，有回调功能可用于向其添加自定义进程。

Answer 2

你有很多方法可以做到。

试试这个：

    <h1>Products</h1>
    <table border="1">
        <tr>
            <td>Name</td>
            <td>Image</td>
            <td>Brand</td>
            <td>Category</td>
            <td>URL</td>
            <td>Shop</td>
        </tr>
        {% for product in products %}
            <tr>
                <td>{{product.name}}</td>
                <td><img src="{{product.image}}" ></td>
                <td>{{product.brand}</td>
                <td>{{product.category}}</td>
                <td>{{product.url}}</td>
                <td>{{product.shop}}</td>
                <td>
                <div class="box">
                    <a class="button" href="#popup-{{ product.id }}">Create a price Alert</a>
                </div>  
                </td>
                <div id="popup-{{product.id}}" class="overlay">
                    <div class="popup">
                        <h4>We will keep you updated</h4>
                        <h4>Actual Price</h2> {{ product.price }}<br>
                        <a class="close" href="#">&times;</a>
                        <h4>Desired amount</h4>
                        <input type="text" name="montant_souhaite" ><br>
                    </div>
                </div>
            </tr>  
        {% endfor %}    
    </table>

您也可以使用 ajax。您不会在同一页面上加载所有模式。

（顺便说一句，用 th 代替 tr 作为你的 table 头）

Answer 3

这是脚本：

<script>
    $('.alert').on('click', function(){
      $('.price').html($(this).data("price"));
   }
);
</script>

html 看起来像这样：

<link href="{{ asset('../web/main.css') }}" rel="stylesheet">

<h1>Products</h1>
<table border="1">
    <tr>
        <td>Name</td>
        <td>Image</td>
        <td>Brand</td>
        <td>Category</td>
        <td>URL</td>
        <td>Shop</td>
    </tr>
    {% for product in products %}
        <tr>
            <td>{{product.name}}</td>
            <td><img src="{{product.image}}" ></td>
            <td>{{product.brand}</td>
            <td>{{product.category}}</td>
            <td>{{product.url}}</td>
            <td>{{product.shop}}</td>
            <td><div class="box"><a class="alert button" data-price="{{ product.price }}" href="#popup1">Create a price Alert</a></div>


            </td>
        <div id="popup1" class="overlay">
            <div class="popup">

                <h4>We will keep you updated</h4>
                <h4>Actual Price</h2> <span class='price'></span><br>       <a class="close" href="#">&times;</a>
                    <h4>Desired amount</h4><input type="text" name="montant_souhaite" ><br>



            </div>
        </div>

    </tr>  


{% endfor %}    

</table>

价格 Alert:How 以将价格产品从产品列表传递到弹出窗口？

Price Alert:How to pass price product from a list of profucts to a popup?

php

popup

symfony

twig