Question

我有一个产品清单，foreach产品我有一个按钮“创建价格提示”。当我点击按钮时，弹出窗口显示并包含当前产品的价格：

<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

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

如果这是自定义JS，有很多方法可以做到这一点，其中之一就是添加一个＆＃34;数据价格＆＃34;属于您的<tr>包含价格，以及＆＃34;价格＆＃34;在弹出窗口中以价格围绕<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>

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

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。您不会在同一页面上加载所有模态。

（顺便说一下，用你的桌子代替tr）

Answer 3

这是剧本：

Intent intent = new Intent(Intent.ACTION_ATTACH_DATA);
            intent.setDataAndType(ContactsContract.Contacts.CONTENT_URI, "image/*");
            intent.putExtra("mimeType", "image/jpeg");
            intent.putExtra("image", imageView.getDrawingCache());
            startActivity(Intent.createChooser(intent, "Select Wallpaper"));

html看起来像这样：

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

价格提醒：如何将价格产品从产品列表传递到弹出窗口？

3 个答案: