jQuery 五星好評實現

2022-07-22 03:15:09 字數 749 閱讀 9935

在美團、**、京東等網頁上,有許多商品、服務評價頁面,五星好評功能很常見,本文利用jquery實現五星好評功能。

案例:案例需求:

如左圖所示,滑鼠進入某個五角星,該五角星包括之前的五角星全部變成黃色。

滑鼠離開後,變成黃色的恢復原狀

當滑鼠在某個五角星上點選的時候,該五角星和其之前的五角星全部變成黃色,滑鼠離開後,顏色也不會恢復過來。

實現思路:

①獲取所有的li(五角星全部存在於li標籤中),給$(this)註冊mouseover、mouseout、click事件

②mouseover事件中,將當前和前面的五角星變成黃色

$(this).text("★").prevall("li").text("★");

③click事件中,給當前點選的li五角星賦予index屬性,方便在滑鼠滑出的時候,能夠儲存點選時候五角星及之前五角星的狀態,同時清除其他所有的li的index屬性

$(this).attr("index",1).siblings("li").removeattr();

④mouseout事件中,所有的li變為空白,但是屬性index有值的li及其前面的li變為黃色

$(this).text("☆").siblings().text("☆");

$( " li [indx=1] ").text("★").prevall().text("★");

**如下:

1

2333

3441

42

五星好評的cookie實現

1.先通過object.values實現對輸出結果的轉換,轉換為陣列型別 2.通過 var date new date date.setfullyear 2021 設定失效時間 3.通過document.cookie進行儲存。document.cookie 商品符合度 arr 0 expires d...

自定義View 老司機帶你實現五星好評效果

這個效果想必大家都非常熟悉,那麼android如何自定義實現這種效果呢?首先自定義屬性 下面看看具體實現 created by michael on 2019 11 1.public class ratingstar extends view public ratingstar context co...

微信小程式自定義五星好評元件

class total class list wx for wx key index class item star class star src mode aspectfit aspectfill widthfix bind tap addstar data index image view vi...