jQ基础day05五星评分小案例

jQ基础day05-18,

$(function() {
    $(".comment>li").mouseover(function () {
      //鼠标进入,当前的五角星以及它前边的所有兄弟五角星都变成实心。
      $(this).text("★").prevAll("li").text("★");
    }).mouseout(function () {
    /*  鼠标离开,当前的li变成空心。*/
      $(".comment").find("li").text("☆");
      /*鼠标离开后,带有自定义属性的当前的li的内容变成实心,并且它前边的兄弟五角星也变成实心。*/
      $(".comment>li[index=1]").text("★").prevAll("li").text("★");
    }).click(function () {
      /*点击事件,给被点击的li自定义添加属性index值为1,并且当前被点击的li的所有兄弟元素li移除自定义属性。*/
      $(this).attr("index","1").siblings("li").removeAttr("index");  
    });
  });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章