jQuery melaksanakan kod komen bintang berdasarkan ajax

jQuery melaksanakan kod komen bintang berdasarkan ajax_jquery

WBOY

Lepaskan： 2016-05-16 15:46:26

asal

1173 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan jQuery kod komen bintang berdasarkan ajax. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Jquery digunakan di sini untuk meniru fungsi ulasan bintang Dianping.com, modul ulasan Ajax, klik bintang dengan tetikus untuk menilai, dan di bawah adalah skor, yang boleh diklik untuk memberikan mata kesan popular di Internet Kod ini agak lengkap Saya percaya ramai rakan akan Suka.

Mari kita lihat tangkapan skrin kesan larian:

Kod khusus adalah seperti berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>jquery点评网星星评论</TITLE>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:left; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
b,em,i{ font-style:normal; font-weight:normal;}
h1,h2,h3,h4{ font-size:14px;}
h5{ font-size:12px;}
h6{ font-size:12px;font-style:normal;}
.fl{ float: left; display: inline;}
.box_163css{ width: 480px;margin:20px auto; height: 30px;}
.s_name{ float:left; display: block; width: 60px; padding-top: 4px; text-align: right;}
.star_ul{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat 0 -150px; width: 132px; z-index: 10; position: relative; height: 25px;}
.star_ul li{ float: left; margin-right:1px;width: 25px; height: 25px; }
.star_ul li a{ display: block; height: 25px; position: absolute; left: 0; top: 0; text-indent: -999em;}
.star_ul li .active-star{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat;}
.star_ul li .one-star{width: 25px;background-position:0 -120px; z-index: 50;}
.star_ul li .two-star{width: 51px;background-position:0 -90px;z-index: 40;}
.star_ul li .three-star{width:79px; background-position:0 -60px;z-index: 30;}
.star_ul li .four-star{width:105px; background-position:0 -30px;z-index: 20;}
.star_ul li .five-star{width:129px; margin-right: 0; background-position:0 0;z-index: 10;}
.s_result{ padding: 6px 0 0 5px; }
.square_ul{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat 0 -222px; width: 146px; z-index: 10; position: relative; height: 20px;}
.square_ul li{ float: left; margin-right:1px;width: 29px; height: 20px; }
.square_ul li a{ display: block; height: 20px; position: absolute; left: 0; top: 0; text-indent: -999em;}
.square_ul li .active-square{background: url(http://files.jb51.net/file_images/article/201508/201587170508564.png) no-repeat;}
.square_ul li .square-1{width: 29px;background-position:0 -243px; z-index: 50;}
.square_ul li .square-2{width: 58px;background-position:0 -264px;z-index: 40;}
.square_ul li .square-3{width:87px; background-position:0 -285px;z-index: 30;}
.square_ul li .square-4{width:116px; background-position:0 -306px;z-index: 20;}
.square_ul li .square-5{width:145px; margin-right: 0; background-position:0 -327px;z-index: 10;}
.s_result_square{padding: 4px 0 0 9px; }
</style>
<SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT>
</HEAD>
<script type="text/javascript">
$(function(){
 $('.star_ul a').hover(function(){$(this).addClass('active-star');$('.s_result').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-star');$('.s_result').css('color','#333').html('请打分')});
 $('.star_ul a').click(function(){
 alert($('.s_result').html());
})
$('.square_ul a').hover(function(){$(this).addClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#c00').html($(this).attr('title'))},function(){$(this).removeClass('active-square');$(this).parents('.box_163css').find('.s_result_square').css('color','#333').html('请打分')});
 $('.square_ul a').click(function(){
  alert($(this).parents('.box_163css').find('.s_result_square').html());
 })
})
</script>
<BODY>
<div class="box_163css">
 <span class="s_name">总体评价：</span>
 <ul class="star_ul fl">
  <li><a class="one-star" title="很差" href="#"></a></li>
  <li><a class="two-star" title="差" href="#"></a></li>
  <li><a class="three-star" title="还行" href="#"></a></li>
  <li><a class="four-star" title="好" href="#"></a></li>
  <li><a class="five-star" title="很好" href="#"></a></li>
 </ul>
 <span class="s_result fl">请打分</span>
</div>
<div class="box_163css">
 <span class="s_name">口味：</span>
 <ul class="square_ul fl">
  <li><a class="square-1" title="差" href="#"></a></li>
  <li><a class="square-2" title="一般" href="#"></a></li>
  <li><a class="square-3" title="好" href="#"></a></li>
  <li><a class="square-4" title="很好" href="#"></a></li>
  <li><a class="square-5" title="非常好" href="#"></a></li>
 </ul>
 <span class="s_result_square fl">请打分</span>
</div>
<div class="box_163css">
 <span class="s_name">环境：</span>
 <ul class="square_ul fl">
  <li><a class="square-1" title="差" href="#"></a></li>
  <li><a class="square-2" title="一般" href="#"></a></li>
  <li><a class="square-3" title="好" href="#"></a></li>
  <li><a class="square-4" title="很好" href="#"></a></li>
  <li><a class="square-5" title="非常好" href="#"></a></li>
 </ul>
 <span class="s_result_square fl">请打分</span>
</div>
<div style="text-align:center;clear:both">
</div>
</BODY>
</HTML>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.