今天我遇到了一个问题,就是需要在商品列表后面添加一个推送,然后跳出一个遮罩层。并在遮罩层中完成相关操作,
这个刚开始以为很简单,用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>
很简单吧,是自己想多了
波比源码 – 精品源码模版分享 | www.bobi11.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站源码并不保证全部能正常使用,仅供有技术基础的人学习研究,请谨慎下载
8. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
波比源码 » 商品列表弹出遮罩层
波比源码 » 商品列表弹出遮罩层