jquery 仿淘宝评价

孟巧桑 3个月前 54浏览 0评论

jquery可以让我们更轻松地实现复杂的项目需求。特别是在仿制淘宝评价这种页面交互复杂的项目中,jquery的应用就显得尤为重要。

//实现评价星级和评价标签的选择功能
$('.star').on('click',function(){
  $(this).prevAll().addBack().addClass('checked');
  $(this).nextAll().removeClass('checked');
});
$('.tag li').on('click',function(){
  $(this).toggleClass('checked');
});

//实现提交评价的功能
$('.submit').on('click',function(){
  var star = $('.checked.star').length; //获取选中的星级数量
  var tagArr = []; //存储选中的标签
  $('.checked.tag').each(function(){
    tagArr.push($(this).text());
  });
  var comment = $('.comment').val(); //获取用户输入的评价内容
  //数据提交
  $.ajax({
    type:'POST',
    url:'submit.php',
    data:{
      star:star,
      tags:tagArr.join(','),
      comment:comment
    },
    success:function(res){
      if(res.code == 1){
        alert('评价成功!');
      }
    }
  });
});

通过上述代码的实现,我们可以让用户自由选择评价的星级和标签,并以ajax的方式将评价数据提交到服务器。这样就可以大大提高评价提交的效率和用户体验。