关于数据与后端进行交流匹配(点亮星星)


Posted in Javascript onAugust 03, 2016

1.在项目中碰到了商品评价页面,里面有关于对商品的星星评价,当时的我只是把效果写出来了(就是用户点击几颗星星亮就显现几颗亮),

当我做好页面交给后端同事的时候,他说我这样做没有意义他没法做,那时我的脑子有些懵了。

后来后端同事说他来捣腾算了,作为一名21世纪的阳光好青年怎么能够把自己的任务都让同事来帮忙完成呢~

通过同事一番指教和自己的探索,总算明白了这里面的关系,下面我通过自己的话来说明这个程序应该怎么写,要具备哪些操作。

a,先上图:

关于数据与后端进行交流匹配(点亮星星)

b:上面图片评价一个亮了5颗,一个亮了4颗,是什么东西让它这样的呢?见下图:

关于数据与后端进行交流匹配(点亮星星)

是的,没错,起始星星的点亮颗数就是因为data

c: 现在可以来谈论一下这个data了,可是这个data是个什么东西呢?

原来他是前端和后端约定好在取存数据的地方(可以给它取任意名字tada,tdat都可以),后端可以给它赋值,data等于多少就亮多少颗星星。可是为什么要这个data呢?

是酱紫的:用户a点击星星的时候是为了之后可以给用户b用户c用户d...看的,所以用户点击的这个星星的个数必须可以存储(赋值)在某个地方(也就是data)上让后台能够取到

也就是前端赋值,后端取值,而后后端把取得的数据储存在数据库中而后重新赋值于data上,以显示用户a曾评价的好评的星星个数。

前端赋值-----》后端取值--》后端储存数据--》后端根据储存的数据反馈给前端--》前端根据后端反馈的数据在页面中展现相应的效果

好了,清楚了逻辑就可以写程序了:

$('.evaluate_mark').each(function(){
var star = $(this).find('.u-grade').attr('data'); //获取data 一个为5,一个为4
/*alert(star)*/
$(this).find('.u-grade div').removeClass('light'); //移除所有class的 light
$(this).find('.u-grade div').each(function(i,ele){ //ele当前的元素, i当前元素的索引
if(i<star){ 
/*alert(i);*/ 
/*alert(ele);*/ 
$(ele).addClass('light'); 
}
});
});

上面的代码比较简单,首先遍历,遍历找到.u-grade下面的div,也就是u-grada_item,

找到它之后把它所有的light移除掉(light是css中点亮星星的class),而后把u-grada_item进行遍历,star已经取得了data值,根据i<star进行判断

从而显示星星亮度的个数,也就是上面第一张图一个亮五颗星一个亮四颗。

4.1:至此我们已经完成了后端赋值,前端表现效果这一块了。此时还差两块,

一块是用户点击产生效果这一块,另一块是把用户点击当前星星的那个数值赋值在data上(让后端取值保存,重新赋值展现)

4.2:下面来做用户点击表现效果这一块

$(function(){
$.setGrade = function($ele,index){
var $item = $ele.find(".u-grade_item");
$item.removeClass("light"); 
$item.slice(0,index+1).addClass("light"); 
/*alert(index+1);*/
};

(function(){

var $item = $(".u-grade .u-grade_item"); 

$item.click(function(){

var $this = $(this); /*定义一个变量保存当前的$item对象*/

var index = $this.parent(".u-grade").children(".u-grade_item").index($this); 

//通过index()返回指定元素的index位置,也就是自己所认为的当前元素的索引值

/*alert(index);*/

$.setGrade($this.parent(),index); //jQuery下的静态方法

})
})();
});

a:代码实现就不一一说了,可以看注释,就这样,就完成用户点击产生效果这一块,下面只差最后一块了,把用户点击的这个星星的数值赋值在data上,

明确这个就很好办了:

(function(){
var $item = $(".u-grade .u-grade_item"); 
$item.click(function(){
var $this = $(this); 
var index = $this.parent(".u-grade").children(".u-grade_item").index($this); 



  var star = $(this).parent(".u-grade").attr('data',index+1);
//把点击当前的那个元素的索引赋值给data,以可以改变原来data的数值
$.setGrade($this.parent(),index); //jQuery下的静态方法
})
})();

好了,到此本文的全部内容就介绍完了,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
JS简单生成两个数字之间随机数的方法
Aug 03 #Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 #Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 #Javascript
15款最好的Bootstrap在线编辑器
Aug 03 #Javascript
基于d3.js实现实时刷新的折线图
Aug 03 #Javascript
JS判断iframe是否加载完成的方法
Aug 03 #Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 #Javascript
You might like
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
如何在Django项目中引入静态文件
2019/07/26 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
详解Python流程控制语句
2020/10/28 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
一份创业计划书范文
2014/02/08 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
学习十八大演讲稿
2014/09/15 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2015年教研工作总结
2015/05/23 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
创业计划书之寿司
2019/07/19 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
解析redis hash应用场景和常用命令
2021/08/04 Redis