cari

Rumah  >  Artikel  >  hujung hadapan web  >  Contoh jquery yang melaksanakan fungsi yang serupa dengan rating_jquery bintang Taobao

Contoh jquery yang melaksanakan fungsi yang serupa dengan rating_jquery bintang Taobao

WBOY
WBOYasal
2016-05-16 16:36:201282semak imbas

Contoh dalam artikel ini menerangkan cara jquery melaksanakan fungsi penarafan bintang Taobao dan dikongsi dengan anda untuk rujukan anda. Kaedah khusus adalah seperti berikut:

Bahagian html kod adalah seperti berikut: 

<body>
  <div id="div">
    <ul>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
    </ul>
  </div>
  <p id="p"></p>
  <p id="score"></p>
</body>

Dalam kod di atas:

id="p"tunjukkan skor masa nyata

id="skor" memaparkan skor akhir

Kod javascript adalah seperti berikut: 

<script type="text/javascript">
$(function () {
  //为所有的li标签绑定mouseout和mouseover事件。bind({事件名：function(){},事件名：function(){}})的方法绑定多个事件
  $("#div li").bind({
 mouseout:function () {
   $(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆")
 },
 mouseover: function () {
   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
 }
  });
  //=实时显示分数.【index】搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
   $("#div li").mouseover(function () {
   $("#p").html(parseInt( $(this).index("#div li"))+1);
 });
  //鼠标按下时，确定分数。额，就不更改了，大局已定。
 $("#div li").mousedown(function () {
   $("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));
   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
   //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除
   $(this).unbind().prevAll().unbind().nextAll().unbind();
 });
  })
</script>

Saya harap artikel ini akan membantu pengaturcaraan WEB jQuery semua orang

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah untuk menghantar parameter konfigurasi melalui kemahiran atribut_javascript tersuai skripArtikel seterusnya：Kaedah untuk menghantar parameter konfigurasi melalui kemahiran atribut_javascript tersuai skrip

Artikel berkaitan

Lihat lagi