Tasays

js+ajax滑动星星评分


星星

原谅我使用的dede,php文件需要写在plus文件夹下。
值得一提的是星星是分为4种 黄色 左右 2个 灰色 左右 2个。

星星滑动效果

    //js星星滑动
    $(function(){
    $('#cccc img').mouseover(function(){
    //左边全部变为黄色
    $(this).prevAll('img').each(function(k,v){
            var src=$(this).attr('src');
            src =src.replace('rank_3.gif','rank_1.gif');
            src =src.replace('rank_4.gif','rank_2.gif');
            $(this).attr('src',src);
            }
        )
    //当前变色
    var src=$(this).attr('src');
            src =src.replace('rank_3.gif','rank_1.gif');
            src =src.replace('rank_4.gif','rank_2.gif');
            $(this).attr('src',src);
    //右边全部变为灰色
    $(this).nextAll('img').each(function(k,v){
            var src=$(this).attr('src');
            src =src.replace('rank_1.gif','rank_3.gif');
            src =src.replace('rank_2.gif','rank_4.gif');
            $(this).attr('src',src);
            }
        )
    }
)

点击评分

//点击ajax添加评分
$('#cccc img').click(function(){
    var i=$(this).index();
    var score = (i+1)/2;
    var url = "{dede:global.cfg_phpurl/}/get_score.php";
    var id =  "{dede:field.id/}";
    var data = {
        'aid':id,
        'score':score,
        'url':'{dede:field name="arcurl"/}'
        };
    var success = function(res){
        if(res.status=="ok"){
                $('#score').html(res.score);
                $('#pfrenshu').html(res.pfrenshu);    
        }
        if(res.status=="error"){
                alert('一天只能评价一次');
            }
        }
    $.get(url,data,success,'json');
    })

})

php dede 处理评分

require_once(dirname(__FILE__)."/../include/common.inc.php");

$aid = $_GET['aid'];

$score = $_GET['score'];

//判断是否已经评过分
if($aid==$_COOKIE['aid']){
    echo json_encode(array(
        'status'=>'error',
        )
        );
    die();    
} 

$url = $_GET['url'];

//根据url判断当前是那张表的数据
$url = explode('/',$url);

if(in_array('dongman',$url)){

//查询评分
$pf_array = $dsql->GetOne("SELECT pfrenshu,pingfen FROM `#@__addon18` WHERE aid='$aid' ");

//计算评分
$new_score = round(($pf_array['pingfen']*$pf_array['pfrenshu']+$score)/($pf_array['pfrenshu']+1),2);

//更新评分,人数
$dsql->ExecuteNoneQuery("UPDATE `#@__addon18` SET pfrenshu = pfrenshu+1,pingfen = '$new_score' WHERE aid='$aid' "); 

echo json_encode(array(
    'score'=>$new_score,
    'status'=>'ok',
    'pfrenshu'=>$pf_array['pfrenshu']+1,
));
     }

//添加cookie防止刷分 //设置cookie过期时间
 $day =explode('-',date('Y-m-d',time()));

 $time = mktime('23','59','59',$day[1],$day[2],$day[0]);

 setcookie('aid',$aid,$time,'/');

因为dede文件都是静态文件,前台页面评分数据需使用ajax更新评分

$(function(){
        $.ajax({
        url:'{dede:global.cfg_phpurl/}/get_pingfen.php',
        dataType:'json',
        type:'get',
        data:{aid:'{dede:field.id/}',url:'{dede:field name="arcurl"/}'},
        success:function(res){
                if(res.pingfen){
                        $('#score').html(res.pingfen);
                        //计算星星
                        var sc_num =Math.ceil($('#score').html()*2);
              $('#cccc img').each(function(k,v) {
                      if(k < sc_num){
                          var src=$(this).attr('src');
                      src =src.replace('rank_3.gif','rank_1.gif');
                      src =src.replace('rank_4.gif','rank_2.gif');
                      $(this).attr('src',src);
                      }
          })
                  }
              }
          })
        })