五星评价的一个模块

项目中需要这个小功能,就写了出来。

<script type="text/javascript">
$(function () {
//为所有的li标签绑定mouseout和mouseover事件。bind({事件名:function(){},事件名:function(){}})的方法绑定多个事件
$("#div li").bind({
mouseout:function () {
$(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆")
},
mouseover: function () {
$(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
}
});
//=实时显示分数.【index】搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
$("#div li").mouseover(function () {
$("#p").html(parseInt( $(this).index("#div li"))+1);
});
//鼠标按下时,确定分数。额,就不更改了,大局已定。
$("#div li").mousedown(function () {
$("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));
$(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
//全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除
});
})
</script>

<div id="div">
<ul class="test_ul" >
<li style="list-style-type:none;">☆</li> <li style="list-style-type:none;">☆</li> <li style="list-style-type:none;">☆</li><li style="list-style-type:none;">☆</li><li style="list-style-type:none;">☆</li>
</ul>
</div>
<p id="p"></p>
<p id="score"></p>

时间: 2024-10-25 08:39:42

五星评价的一个模块的相关文章

将php作为一个模块供给Apache加载

怎么看,php有没有作为一个模块给Apache呢? Comand指令   httpd -M 很明显,并没有找的php这个模块 第一步 打开Apache的配置文件 将对话框滚动条往下拉,能看到这么一块配置 软件配置文件注释符号是# php作为模块语法: LoadModule php5_module "E:/wamp/php/php5apache2_2.dll" LoadModule[这是指令,不区分大小写,例如JavaScript定义变量关键字var] php5_module[模块名,例

声明了一个模块和一个控制器AngularJS的处理过程

例如下面这段代码.这是一个简单的应用,声明了一个模块和一个控制器: angular.module('myApp', []) .factory('greeter', function() { return { greet: function(msg) {alert(msg);} } }) .controller('MyController',function($scope, greeter) { $scope.sayHello = function() { greeter.greet("Hello

Sea.js 是一个模块加载器

1 模块定义define define(function(require,exports,module){ //require 引入需要的模块如jquery等 //var $ = require('./jquery'); //exports可以把方法或属性暴露给外部 exports.name = 'hi'; exports.hi = function(){ alert('hello'); } //module提供了模块信息 }); 2 使用定义好的模块seajs.use <!doctype ht

jquery 五星评价(图片实现)

1111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五星评价(图片实现) </title> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> </head> <body

开发一个模块小结

想取得不一样的东西,就要做不一样的事 以前做工作,就是随着做,没有时间意识,虽然不是故意有一打没一打的做,做实际上就是有一打没一打的在做 看到别的同事一直在争分夺秒的在做这个事,一直不是很理解,工作嘛,按计划,按节奏完成就可以了嘛,干嘛根和别人抢一样 闲话不多说 这次就完成一个框架,就是一个筐子,把其它部分放进行执行,方法还是注册,就是扫描配置文件,class.forName来实例化class,最后执行相关任务 各种判断,各种分组,各种抽象,这些都是根据业务来处理的,领域模型嘛 小结: (1)在

python -m 运行一个模块

python -m 模块名 直接把当前目录 '' 当做模块的运行路径,不需要import 直接运行 例如: python -m SimpleHTTPServer #python2中启动一个简单的http服务器 python -m http.server #python3中启动一个简单的http服务器 以上两种方式就是运行了模块里边的所有内容,一般运行的函数部分在 if '__name__' == '__main__': 里边, 比如 http.server就是在里边跑起了服务器 原文地址:htt

Js特效 -- 五星评价

代码放到GitHub上面:https://github.com/chenweihuan/five-star.(非原创,只是想记录一些知识点) css选择器: ~:如果是  p~ul ,为所有相同的父元素中位于 p 元素之后的所有 ul 元素,并不需要紧接着. +:如果是 ul > li + li ,就可以顶部通栏的分割线了,符合条件的下一个兄弟节点. 如果是 h1 + p,选择紧接在 h1 元素后出现的 p 元素(需要满足 h1 和 p 元素拥有共同的父元素) 还有就是要学多一点css3知识..

angular学习之手动启动一个模块

在一个angularjs页面里面,一般只用一个ng-app,但是一个页面里面也可以同时存在多个ng-app,但是只能是平行的,不能是嵌套的,那么angularjs只能识别第一个ng-app,后面的ng-app无法被识别,这个时候就需要我们手动去启动,一般我们是用的是angularjs里面的bootstrap函数 如下:angular.element(document).ready(function(){ angular.bootstrap(document.getElementById('Id'

js 实现仿 淘宝 五星评价 demo

<style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot'); src: url('//at.alicdn.com/t/font_wkv6intmx8cnxw29.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_wk