仿淘宝实现多行星级评价

仿淘宝实现多行星级评价

最近再做一个评价功能,当时首先想到的是淘宝的评价功能,感觉那个不错,由于是初学者所以还不是很会,于是在网上百度了一下,我发现网上的都是只有一行星级评价功能,所以我在他

<script type="text/javascript" >
    var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}
var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
}
function stopDefault( e ) {
     if ( e && e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
    return false;
} 

var Stars = Class.create();
Stars.prototype = {
    initialize: function(star,options) {
        this.SetOptions(options); //默认属性
        var flag = 999; //定义全局指针
        var isIE = (document.all) ? true : false; //IE?
        var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
        var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果
        var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
        var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
        var tipsTxt = this.options.tipsTxt; // 定义提示文案
        var len = starlist.length; //星星数量
        

        for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过
            starlist[i].value = i;
            starlist[i].onclick = function(e){
                stopDefault(e);
                this.className = this.className + nowClass;
                flag = this.value;
                input.value = this.getAttribute("star:value");
                tips.innerHTML = tipsTxt[this.value]
            }
            starlist[i].onmouseover = function(){
                if (flag< 999){
                    var reg = RegExp(nowClass,"g");
                    starlist[flag].className = starlist[flag].className.replace(reg,"")
                }
            }
            starlist[i].onmouseout = function(){
                if (flag< 999){
                    starlist[flag].className = starlist[flag].className + nowClass;
                }
            }
        };
        if (isIE){ //FIX IE下样式错误
            var li = document.getElementById(star).getElementsByTagName('li');
            for (var i = 0, len = li.length; i < len; i++) {
                var c = li[i];
                if (c) {
                    c.className = c.getElementsByTagName('a')[0].className;
                }
            }
        }
    },
    //设置默认属性
    SetOptions: function(options) {
        this.options = {
   //默认值
            Input:          "",//设置触保存分数的INPUT
            Tips:           "",//设置提示文案容器
            nowClass:   "current-rating",//选中的样式名
            tipsTxt:        ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案
        };
        Extend(this.options, options || {});
    }
}
var Stars1 = new Stars("stars1")
var Stars2 = new Stars("stars2")
var Stars3 = new Stars("stars3")
var Stars4 = new Stars("stars4")

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/113654.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 男人的恋爱过程「建议收藏」

    男人的恋爱过程「建议收藏」当对选择恋人的过程越谨慎,就越容易找到适合的恋人。虽然有的人很快就达到目的,但是基本上这是一个不断尝试与错误的过程。透过自我调整,最后终将达成目的。对常规四个阶段变化的了解,你可以了解你距离目标还有多远。让我们仔细探索男人、在四个阶段中的不同反应。男人:生理上的吸引在第一阶段男人对女人先产生生理上的吸引是很正常的。男人尤其注意女人的外表,她走路的方式、她的头发、微笑、眼睛、身高、美腿、…

  • 薯条 SpringBoot 在IDEA中实现热部署 (JRebel实用版)「建议收藏」

    薯条 SpringBoot 在IDEA中实现热部署 (JRebel实用版)「建议收藏」热部署只是针对class文件,源文件这些。对于属性文件.xml或.properties,只要修改了,都需要重启服务器,因为属性文件是在服务器启动的时候加载的,不可能被热部署识别到。下载并安装Jrebel实例服务地址:https://jrebel.qekang.com/{GUID}自行生成GUID地址:在线生成GUID如果失效刷新GUID替换就可以!欢迎留言反…

  • Lambda架构简介

    Lambda架构简介参考文章:深入理解大数据架构之——Lambda架构传统系统的问题“我们正在从IT时代走向DT时代(数据时代)。IT和DT之间,不仅仅是技术的变革,更是思想意识的变革,IT主要是为自我服务,用来更好地自我控制和管理,DT则是激活生产力,让别人活得比你好”——阿里巴巴董事局主席马云。数据量从M的级别到G的级别到现在T的级、P的级别。数据量的变化数据管理系统(DBMS)和数仓系统(DW)也在悄然的变化着。传统应用的数据系统架构设计时,应用直接访问数据库系统。当用户访问量增加时,数据库无法支撑

  • 【Android音视频开发】【034】WEBRTC之ICE服务器搭建

    【Android音视频开发】【034】WEBRTC之ICE服务器搭建前篇由于ICE服务器是作为一个中转服务器来使用的,因此它必须搭建在外网,我是搭建在阿里云服务器上面的搭建ICE服务器需要一定的Linux经验和排错能力,没接触过Linux的量力而为切换到root用户sudosuroot安装opensslapt-getinstallopenssllibssl-devmake安装libevent2wgethttps://github.com/downloads/libevent/libevent/libevent-2.0.21-stable.tar

  • Docker安装Rabbitmq3.8.7[通俗易懂]

    Docker安装Rabbitmq3.8.7[通俗易懂]Docker环境下安装Rabbitmq一、简介什么是rabbitmq:RabbitMQ是一套开源(MPL)的消息队列服务软件,是由LShift提供的一个AdvancedMessageQueuingProtocol(AMQP)的开源实现,由以高性能、健壮以及可伸缩性出名的Erlang写成。官网地址:https://www.rabbitmq.com/二、环境准备LInux环境:Centos7Docker版本:17.12.0-ce预装MQ版本:3.8.7SS

  • pip卸载安装的所有python包「建议收藏」

    pip卸载安装的所有python包「建议收藏」pip卸载安装的所有python包

    2022年10月30日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号