为js生成的class添加点击事件


最近写了一个功能,就是为公司网站的商品详情页写一个我常购买这么一个模块,具体长什么样的,大家可以跑到京东那边看下他的右边侧栏的那些东西就知道了

只是京东推荐的是“看了又看”,类似于淘宝的,看了商品的买家还看了...这类的也是真正所谓的大数据,而我写的是小数据,就是把买家之前买过的东西显示在右边的侧边栏。一次只显示3个商品,然后点击向下的按钮或向上的按钮,ul标签的top就会减小一定的px达成一种ul在运动的样子


跟上头沟通过后,决定如果买家的我常购买大于8个商品,那我常购买里的商品就随机显示8个也就是说在每次刷新详情页的时候右边侧边栏里的商品都是不一样的,当小于8个就全部显示,且顺序不会变化。


当然,这部分由后台来写,数据打乱用shuffle()方法。之前先判断数组长度,大于8再走shuffle方法。


至于为什么不在前端完成,理由主要是假使该客户之前买了很多商品,都加载出来,买家可能下完单了详情页里的侧边栏还没显示出来,再数据处理下,这网页差不多算费了,放后台速度先让会比在前端快。


废话完毕

用ajax调接口来获取我常购买的数据。这边遇到了两个之前没有遇到的情况

一、因为传来的每组数据是按商品的id来命名,所以以一般的for循环来循环数组是不对的,因为result[i]是undefine的。所以这里用for(var i in result)

但是这里值得注意的是,在数据循环完毕后,(这里假设有八组数据)i不是8而是9&#

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 layui 的表格中添加点击事件,可以通过监听表格的 `tool` 事件来实现。具体步骤如下: 1. 在表格的 `toolbar` 中添加一个按钮,并设置一个自定义的 `lay-event` 值,用于区分不同的操作。 ```javascript toolbar: '<div class="layui-btn-container">' + '<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>' + '</div>', ``` 2. 监听表格的 `tool` 事件,判断点击的按钮类型,并根据需要执行不同的操作。 ```javascript table.on('tool(test)', function(obj){ var data = obj.data; // 获取当前行数据 if(obj.event === 'add'){ // 判断点击的按钮类型 // 执行添加操作 console.log('add', data); } }); ``` 完整的代码示例如下: ```html <table id="test" lay-filter="test"></table> ``` ```javascript layui.use(['table'], function(){ var table = layui.table; // 渲染表格 table.render({ elem: '#test', url: '/demo/table/user/', toolbar: '<div class="layui-btn-container">' + '<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>' + '</div>', cols: [[ {field:'id', title:'ID', width:80}, {field:'username', title:'用户名'}, {field:'email', title:'邮箱'}, {field:'sex', title:'性别', width:80}, {field:'city', title:'城市'}, {field:'sign', title:'签名'}, {field:'experience', title:'积分', width:80}, {field:'logins', title:'登入次数', width:100}, {field:'ip', title:'IP', width:120}, {field:'joinTime', title:'加入时间', width:120}, {fixed: 'right', title:'操作', toolbar: '<div><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></div>', width:120} ]] }); // 监听表格的 tool 事件 table.on('tool(test)', function(obj){ var data = obj.data; // 获取当前行数据 if(obj.event === 'add'){ // 判断点击的按钮类型 // 执行添加操作 console.log('add', data); } }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值