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


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 相关文章推荐
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
参观考察邀请函范文
2014/01/29 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
美国留学经济担保书
2014/05/20 职场文书
大学新闻系求职信
2014/06/03 职场文书
房产协议书范本
2014/10/18 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
琅琊山导游词
2015/02/05 职场文书
质检员岗位职责范本
2015/04/07 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android