jQ基础day05五星评分小案例

最新推荐文章于 2019-11-19 14:59:30 发布

原创最新推荐文章于 2019-11-19 14:59:30 发布 · 478 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jquery基础

当前文章被收录于：

jquery基础

7 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

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");  
    });
  });