评分控件

最新推荐文章于 2024-06-20 19:34:37 发布

shenzhenNBA

最新推荐文章于 2024-06-20 19:34:37 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 管理者/开发者

本文链接：https://blog.csdn.net/shenzhenNBA/article/details/18266627

版权

管理者/开发者同时被 2 个专栏收录

209 篇文章 1 订阅

订阅专栏

JavaScript

60 篇文章 0 订阅

订阅专栏

评分是WEB经常使用到功能，网上有很多，这里整理总结出来，做成一个控件方便日后直接参考；

//---------about comment score------------
function createCmtScoreUI() {
    var strHTML = '';
    strHTML += '<div id="cmtScoreCon" style="display:none;">';
    strHTML += '<div id="cmtStart">';
    strHTML += '<ul>';
    strHTML += '<li><a title="1" href="javascript:;"></a></li>';
    strHTML += '<li><a title="2" href="javascript:;"></a></li>';
    strHTML += '<li><a title="3" href="javascript:;"></a></li>'; // class="on"
    strHTML += '<li><a title="4" href="javascript:;"></a></li>';
    strHTML += '<li><a title="5" href="javascript:;"></a></li>';
    strHTML += '</ul>';
    strHTML += '</div>';
    strHTML += '<div id="tipArrow"></div>';
    strHTML += '</div>';
    return strHTML;
};
function setScore(score) {
    var oSC = document.getElementById("cmtStart");
    var olis = oSC.getElementsByTagName("LI");
    for (var i = 0; i < score; i++) {
        olis[i].className = (i < score ? 'on' : ''); //li默认是一种状态，鼠标移上去又是一种当前指示状态，要给li元素合适样式，即背景分两种图，一种默认的，一种当前状态的，两个图片必须能完全重合
    }
}

function activeScoreEvent() { 
    if (initScoreResult >= 3) {
        initScoreEvent();
    } else {
        setTimeout(function () { activeScoreEvent(); }, 500);
    }
}
function initScoreEvent() {
    $('body').append(createCmtScoreUI());
    $("img[src*='btn_start']").mouseover(function () { //执行触发源，即src含有btn_start的img对象
        curO2C = $(this);		
        var left = $(this).offset().left;
        var top = $(this).offset().top;
        var refOH = $(this).height();
        var conw = $('#cmtScoreCon').width();
        var conh = $('#cmtScoreCon').height();
        left = left - Math.ceil(conw * 3 / 4) - 2;
        top = top - conh - refOH;
        $('#cmtScoreCon').css({ 'left': left, 'top': top, 'position': 'absolute', 'border': '0px solid red' });
        $('#cmtScoreCon').show();
    });
    $("img[src*='btn_start']").mouseout(function () {
        $('#cmtScoreCon').hide();
    });
    $('#cmtScoreCon').hover(function () {
        $('#cmtScoreCon').show();
    }, function () {
        $('#cmtScoreCon').hide();
    });
    $('#cmtStart li').mouseover(function () {
        var startList = $('#cmtStart li');
        var x = startList.index($(this));
        setScore(x + 1);
    });
    $('#cmtStart li').mouseout(function () {
        $('#cmtStart li').removeClass('on');
    });
    $('#cmtStart li').click(function () {
        var startList = $('#cmtStart li');
        var score = startList.index($(this));
        score += 1;
        var opNode = curO2C.parent();
        var objectType = opNode.attr('objectType');
        var objectId = opNode.attr('objectId');                
        var goURL = '/Home/commentScore';  
        var params = { 'Score': score, 'ObjectType': objectType, 'ObjectId': objectId };        
        $.post(goURL, params, function (data) {            
            //ok= comment success, commented= already commented, other=go wrong
            var msg = '';
			if ('ok' == $.trim(data.cmtResult.toLowerCase())) {
				var scoreOCon = curO2C.parent().prev();
				scoreOCon.html('评分：' + data.score);	
                alert('成功评分');
            } else if ('commented' == $.trim(data.cmtResult.toLowerCase())) {
                alert('您已经评过分了，不能再评');
            } else {
                //do nothing yet now
            }
        }, 'json');
    });
}

当然进行评分时，还需要提供各个必要的参数，这个可以把相关参数数据作为某个DOM的某些属性附加到DOM元素上，也可以做其他设计[这里是附加到父节点上]；后台评分时先判断是否已经评分（根据设计看是否需要验证），未评分的进行评分，然后返回（可以返回评分后的结果）；

必须在页面数据DOM加载完成后，才进行各个触发评分的对象初始化评分功能。