仿淘宝实现多行星级评价

仿淘宝实现多行星级评价

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

<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)


相关推荐

  • php获取server端mac和clientmac的地址[通俗易懂]

    php获取server端mac和clientmac的地址

  • js里面的document.cookie详解

    js里面的document.cookie详解设置cookie每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:document.cookie=”userId=828″;如果要一次存储多个名/值对,可以使用分号加空格(;)隔开,例如:document.cookie=”userId=828;userName=hulk”;在cookie的名或值中不能使用分号(;)、逗号(,)、

  • Java在线考试系统(含源码)[通俗易懂]

    Java在线考试系统(含源码)[通俗易懂]本文demo下载和视频教学观看地址:http://www.wisdomdd.cn/Wisdom/resource/articleDetail.htm?resourceId=1076本实例介绍了在线考

  • 新东方王强经典语录视频_新东方王强北大演讲视频

    新东方王强经典语录视频_新东方王强北大演讲视频王强老师是我最喜欢和尊敬的新东方老师之一,06年冬天,有幸王强老师到我所在的大学做演讲。其实,之前也看过很多王强老师演讲的视频,特摘录王强老师经典十条语录。王强老师语录一:中国人强调含蓄,我含一半,你蓄一半,剩下的就是我要表达的。我举个例子就知道了。比如说一首英文歌曲唱ILoveYou的。这抽象概念,英语表达得非常充满细节和逻辑,你不会觉得有歧义和想象…

  • import java.util.scanner是什么意思

    import java.util.scanner是什么意思java中的importjava.util.scanner;是一个类,可以用这个类来从控制台写入数据(可以是int,string等类型)例如:​importjava.util.scanner;publicclassdemo{publicstaticvoidmain(string[]wqs){stringmystr=””;system.out.print(“请你输入字符,按回车结束”);scanner

  • JVM垃圾回收机制 (垃圾判断,垃圾回收算法,垃圾回收器,五种引用)【jvm】「建议收藏」

    JVM垃圾回收机制 (垃圾判断,垃圾回收算法,垃圾回收器,五种引用)【jvm】「建议收藏」????‍????博主主页:爪哇贡尘拾Miraitow????传作时间:????2022年1月9日晚21:44????????????内容介绍:最近在学习JVM所以会时不时更新有关内容????参考资料:黑马JVM度娘????参考链接:????JVM垃圾回收机制⏳简言以励:列位看官,且将新火试新茶,诗酒趁年华????内容较多有问题希望能够不吝赐教????????欢迎点赞????收藏⭐留言????????JVM垃圾回收♻1.1如何判断对象可以回收♻1、引用计数器法2、可达

发表回复

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

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