>웹 프론트엔드 >JS 튜토리얼 >jQuery는 리뷰 평점, 좋은 리뷰, 나쁜 리뷰의 특수 효과를 구현합니다._jquery

jQuery는 리뷰 평점, 좋은 리뷰, 나쁜 리뷰의 특수 효과를 구현합니다._jquery

WBOY
WBOY원래의
2016-05-16 15:01:501785검색

평가 수준의 구현은 타오바오의 좋은 리뷰와 부정적인 리뷰의 특수 효과와 유사합니다. 다양한 수준의 아이콘을 클릭하면 해당 텍스트가 표시됩니다.

jQuery는 리뷰 평점, 좋은 리뷰, 나쁜 리뷰의 특수 효과를 구현합니다._jquery

효과를 보시면 다들 제 말을 이해하셨을 것 같습니다. 이제 코드를 보여드리겠습니다

코드 복사 코드는 다음과 같습니다.


.maxdiv div{
               높이:10px;
               너비:20px;
              테두리:1px 실선 #000;
부동:왼쪽;
               여백:20px 2px 0px 5px;
}
스타일>

코드 복사 코드는 다음과 같습니다.


> > > > >

스팬>




마지막으로 JS를 살펴보겠습니다. 편집자는 위의 모든 의견을 기록했습니다. 사실 중요한 것은 이해를 깊게 하는 것입니다.

코드 복사

코드는 다음과 같습니다. $(함수(){ $(".maxdiv div").bind("hover",function(){            $(this).attr("style","Background:red");//현재 div에 style="Background:red"를 추가합니다.
          $("div:last").prevAll().attr("style","Background:red");//모든 것에 스타일을 추가합니다.
            $(this).nextAll().attr("style","");//현재 div 뒤의 모든 스타일은 "";
        var dsize=$("div [style ='Background:red']").size();//style="Background:red";
를 포함하는 모든 배경의 수를 가져옵니다. If(dsize==1)
            {
          $('span').text("매우 나쁨");
}
          else if(dsize==2)
            {
          $('span').text("차이");
}
          else if(dsize==3)
            {
​​​​ $('span').text("일반");
}
          else if(dsize==4)
            {
          $('span').text("알겠습니다");
}
          else if(dsize==5)
            {
​​​​ $('span').text("매우 좋음");
}
});
});



개인 능력이 부족해서 작품이 별로 아름답지 않네요. 필요한 친구들이 찍어서 예쁘게 만들어도 되겠죠, 하하.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.