商品列表弹出遮罩层

发布时间：2020-12-13 20:20:55 所属栏目：PHP教程来源：网络整理

导读：今天我遇到了一个问题，就是需要在商品列表后面添加一个推送，然后跳出一个遮罩层。并在遮罩层中完成相关操作，这个刚开始以为很简单，用JS好像松松就能搞定，后来发现不对。因为商品列表由php自行生成，如何获得某一条商品的对象成了难题。后面考虑用for

今天我遇到了一个问题，就是需要在商品列表后面添加一个推送，然后跳出一个遮罩层。并在遮罩层中完成相关操作，
这个刚开始以为很简单，用JS好像松松就能搞定，后来发现不对。
因为商品列表由php自行生成，如何获得某一条商品的对象成了难题。
后面考虑用for循环来解决，结果发现在JS中，for循环获得的i总是最后一个，这样不能解决问题。
并且因为使用了JQ插件，跳出遮罩层必须用到<a>标签，而<a>标签内没有value和name属性。所以无法用JS获取。
最后在<a>标签中新建一个button，通过class="send" nam="{goods.id}" 和this.name。这两个属性来获取商品信息，并在遮罩层中

显示。
主要代码：

//遮罩层代码，用hidden来储存商品信息

<div id="myModal" class="reveal-modal">

        <h1>

            遮罩层

        </h1>

        <p>

        <form action="{:U('test')}" method="post">

            <input type="submit" class="btn submit-btn " value="筛选"/>

        <input type="hidden" id="sendform"  name="source_id" value=""/>

        </form>

        </p>

        <a class="close-reveal-modal">×

   </div>

//推送代码

<td><a href="__ROOT__/shares/item/{$goods['id']}.html" target="_blank">{$goods.title}</a>

<a href="#"class="big-link" data-reveal-id="myModal">

<button class="send btn" name="{$goods['id']}">推送</button>

</a>

</td>

//JS代码

<script type="text/javascript">

        $('.send').click(function(){

            $('#sendform').val(this.name);

        });

    </script>

很简单吧，是自己想多了

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!