手提包 东莞网站建设,响水网站建设服务商,沈阳网站设计外包,品牌推广方案怎么写这篇文章主要分享一下前端在使用jQuery给元素绑定click事件时遇到的一点小问题。 今天在通过JS代码动态绑定元素的点击事件时遇到一点问题#xff0c;如上图所示#xff0c;需要实现动态控制低级内丹格子的解锁#xff0c;每种宠物造型都有一个内丹数量。如图#xff0c;忘… 这篇文章主要分享一下前端在使用jQuery给元素绑定click事件时遇到的一点小问题。 今天在通过JS代码动态绑定元素的点击事件时遇到一点问题如上图所示需要实现动态控制低级内丹格子的解锁每种宠物造型都有一个内丹数量。如图忘川童子可学习的内丹数量是4包含了高级内丹所以实际的内丹数量是3所以上图只解锁了3个低级内丹的格子。 对比游戏内数据 前端实现的效果如下点击对话框左边的数据列表动态加载上方和右侧面板的数据这里只关注内丹的加载。
/*** 加载宠物内丹*/
function loadNeidans() {let rowData $(#chongwu_datalist).datalist(getSelected);$(#chongwu_id).val(rowData.id);$(#chongwu_id_).val(rowData.id);for (let i 1; i 4; i) {$(.neidan_ i img).attr(src, /images/lock.png);}$(.gaoji_neidanimg).attr(src, /images/add.png);$(.zhaunshu_neidanimg).attr(src, /images/add.png);// 根据当前宠物的造型为4个低级内丹格子动态绑定点击事件get(/chongwu_category/selectById, {id: rowData.categoryId}, function (res) {// 得到当前宠物造型可以学习的低级内丹数let count res.neidanQuantity - 1;// 如果小于4则有内丹格子未解锁if (count 4) {for (let i 1; i count; i) {$(.neidan_ i).click(function() {loc i;clickNeidan(0);});$(.neidan_ i img).attr(src, /images/add.png);}for (let i count 1; i 4; i) {$(.neidan_ i).click(function () {alertMsg(这只召唤灵只能学习 count 个低级内丹);});}} else {for (let i 1; i 4; i) {$(.neidan_ i img).attr(src, /images/add.png);$(.neidan_ i).on(click, function() {loc i;clickNeidan(0);});}}}, error);get(/chongwu_neidan/selectNeidans, {chongwuId: rowData.id}, function (res) {if (res res.length 0) {for (let i 0; i res.length; i) {let neidan res[i];let image neidan.image;let location neidan.location;if (location 0) {$(.gaoji_neidanimg).attr(src, image);} else {$(.neidan_ neidan.location img).attr(src, image);}}}}, error);get(/zhuanshu_neidan/selectByChongwuId, {chongwuId: rowData.id}, function (response) {let result response.data;if (result) {$(.zhaunshu_neidanimg).attr(src, result.image).attr(title, result.name);}}, error);
} 重点关注下面这块代码这里通过选中宠物的宠物类型ID查询宠物类型信息根据内丹数量动态设置低级内丹对应格子的图片以及点击事件。 // 根据当前宠物的造型为4个低级内丹格子动态绑定点击事件get(/chongwu_category/selectById, {id: rowData.categoryId}, function (res) {// 得到当前宠物造型可以学习的低级内丹数let count res.neidanQuantity - 1;// 如果小于4则有内丹格子未解锁if (count 4) {for (let i 1; i count; i) {$(.neidan_ i).click(function() {loc i;clickNeidan(0);});$(.neidan_ i img).attr(src, /images/add.png);}for (let i count 1; i 4; i) {$(.neidan_ i).click(function () {alertMsg(这只召唤灵只能学习 count 个低级内丹);});}} else {for (let i 1; i 4; i) {$(.neidan_ i img).attr(src, /images/add.png);$(.neidan_ i).on(click, function() {loc i;clickNeidan(0);});}}}, error);
比如忘川童子的内丹数量是4-13所以最后一个内丹格子无效点击时应该提示进行相应提示 上面的代码看起来好像没什么问题但是多点几次左边列表的宠物就会发现点击锁图标所在的格子会弹出越来越多的对话框。
具体原因是每次选择宠物都会给元素绑定一次click事件那么在每次绑定之前解绑之前的click事件就行了通过jQuery的unbind(事件名)方法解除事件的绑定修改之后的代码如下问题完美解决了。
/*** 加载宠物内丹*/
function loadNeidans() {let rowData $(#chongwu_datalist).datalist(getSelected);$(#chongwu_id).val(rowData.id);$(#chongwu_id_).val(rowData.id);for (let i 1; i 4; i) {$(.neidan_ i img).attr(src, /images/lock.png);}$(.gaoji_neidanimg).attr(src, /images/add.png);$(.zhaunshu_neidanimg).attr(src, /images/add.png);// 根据当前宠物的造型为4个低级内丹格子动态绑定点击事件get(/chongwu_category/selectById, {id: rowData.categoryId}, function (res) {// 得到当前宠物造型可以学习的低级内丹数let count res.neidanQuantity - 1;// 如果小于4则有内丹格子未解锁if (count 4) {for (let i 1; i count; i) {$(.neidan_ i).unbind(click).click(function() {loc i;clickNeidan(0);});$(.neidan_ i img).attr(src, /images/add.png);}for (let i count 1; i 4; i) {$(.neidan_ i).unbind(click).click(function () {alertMsg(这只召唤灵只能学习 count 个低级内丹);});}} else {for (let i 1; i 4; i) {$(.neidan_ i img).attr(src, /images/add.png);$(.neidan_ i).unbind(click).click(function() {loc i;clickNeidan(0);});}}}, error);get(/chongwu_neidan/selectNeidans, {chongwuId: rowData.id}, function (res) {if (res res.length 0) {for (let i 0; i res.length; i) {let neidan res[i];let image neidan.image;let location neidan.location;if (location 0) {$(.gaoji_neidanimg).attr(src, image);} else {$(.neidan_ neidan.location img).attr(src, image);}}}}, error);get(/zhuanshu_neidan/selectByChongwuId, {chongwuId: rowData.id}, function (response) {let result response.data;if (result) {$(.zhaunshu_neidanimg).attr(src, result.image).attr(title, result.name);}}, error);
} 总结这种问题一般遇上的几率很少因为很少有这种动态绑定事件的需求写这篇文章是为了记录自己项目中遇到的问题可能这篇文章会对部分遇到类似问题的童鞋有点帮助。 好了文章就分享到这里了看完觉得对你有所帮助不要忘了点赞收藏哦~
