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


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 相关文章推荐
用于table内容排序
Jul 21 Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
javascript实现倒计时提示框
Mar 02 Javascript
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
php过滤危险html代码
2008/08/18 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php文件上传的简单实例
2013/10/19 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
vue--vuex详解
2019/04/15 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
python输入多行字符串的方法总结
2019/07/02 Python
Python适配器模式代码实现解析
2019/08/02 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
优秀老员工获奖感言
2014/02/15 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
财务整改报告范文
2014/11/05 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
Python自动化实战之接口请求的实现
2022/05/30 Python