建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
要實(shí)現(xiàn)五星好評(píng)的效果，我們可以使用jQuery來(lái)實(shí)現(xiàn)，我們需要?jiǎng)?chuàng)建一個(gè)HTML頁(yè)面，包含五個(gè)星星圖標(biāo)和一個(gè)提交按鈕，我們將使用jQuery來(lái)控制星星的點(diǎn)擊事件，當(dāng)用戶(hù)點(diǎn)擊某個(gè)星星時(shí)，該星星的顏色會(huì)發(fā)生變化，同時(shí)計(jì)算用戶(hù)的評(píng)分，當(dāng)用戶(hù)點(diǎn)擊提交按鈕時(shí)，將評(píng)分顯示在頁(yè)面上。
創(chuàng)新互聯(lián)從2013年成立，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元靜海做網(wǎng)站,已為上家服務(wù),為靜海各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):028-86922220
以下是詳細(xì)的技術(shù)教學(xué)：
1、創(chuàng)建HTML頁(yè)面
我們需要?jiǎng)?chuàng)建一個(gè)HTML頁(yè)面，包含五個(gè)星星圖標(biāo)和一個(gè)提交按鈕，可以使用以下代碼：
五星好評(píng)
2、編寫(xiě)jQuery代碼
接下來(lái)，我們需要編寫(xiě)jQuery代碼來(lái)控制星星的點(diǎn)擊事件，我們需要為每個(gè)星星添加點(diǎn)擊事件監(jiān)聽(tīng)器，當(dāng)用戶(hù)點(diǎn)擊某個(gè)星星時(shí)，該星星的顏色會(huì)發(fā)生變化，同時(shí)計(jì)算用戶(hù)的評(píng)分，可以使用以下代碼：
$(document).ready(function () {
let stars = $(".star");
let rating = 0;
let result = $("#result");
let submit = $("#submit");
stars.on("click", function () {
$(this).addClass("active").siblings().removeClass("active");
rating = $(this).index() + 1;
});
submit.on("click", function () {
result.text("您的評(píng)分是：" + rating);
});
});
在上面的代碼中，我們首先獲取了所有的星星、結(jié)果和提交按鈕的元素，我們?yōu)槊總€(gè)星星添加了點(diǎn)擊事件監(jiān)聽(tīng)器，當(dāng)用戶(hù)點(diǎn)擊某個(gè)星星時(shí)，我們給該星星添加了一個(gè)名為active的類(lèi)，同時(shí)移除了其他星星的active類(lèi)，接著，我們計(jì)算了用戶(hù)的評(píng)分，即被點(diǎn)擊的星星的索引加1，我們?yōu)樘峤话粹o添加了一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器，當(dāng)用戶(hù)點(diǎn)擊提交按鈕時(shí)，我們將評(píng)分顯示在頁(yè)面上。
3、添加CSS樣式
為了使五星好評(píng)看起來(lái)更加美觀，我們可以添加一些CSS樣式，可以使用以下代碼：
.star {
cursor: pointer;
fontsize: 24px;
color: #ccc;
}
.star:hover {
color: #f39c12;
}
.star.active {
color: #f39c12;
}
在上面的代碼中，我們?yōu)?code>active類(lèi)的星星添加了一個(gè)顏色屬性，使其變?yōu)辄S色，我們還為鼠標(biāo)懸停在星星上時(shí)添加了一個(gè)顏色屬性，使其變?yōu)辄S色，這樣，當(dāng)用戶(hù)點(diǎn)擊某個(gè)星星時(shí)，該星星的顏色會(huì)變?yōu)辄S色，表示用戶(hù)已經(jīng)選擇了該星級(jí)，當(dāng)鼠標(biāo)懸停在其他星星上時(shí)，這些星星的顏色也會(huì)變?yōu)辄S色，表示用戶(hù)可以切換到其他星級(jí)。
文章題目：怎么弄五星好評(píng)jquery
文章來(lái)源：http://m.5511xx.com/article/cdpcjgp.html
