Jquery的星級評分

我想要一個星級評分系統，請檢查JSFiddle。我想堅持鼠標點擊評分。Jquery的星級評分

HTML：

<div class="rating-star rating-star-off" data-value="0"></div> 
<div class="rating-star rating-star-off" data-value="1"></div> 
<div class="rating-star rating-star-off" data-value="2"></div> 
<div class="rating-star rating-star-off" data-value="3"></div> 
<div class="rating-star rating-star-off" data-value="4"></div> 
</div>

CSS：

.rating-star{width:25px;height:25px;float:left;margin-right:5px;} 
.rating-star-off{background:#eee url(star-off.svg) no-repeat;} 
.rating-star-on{background:#000 url(star-on.svg) no-repeat;}

的jQuery：

$(function(){ 

    $(".rating-star").click(function(e){ 
    $(this).prevAll().andSelf().addClass('rating-star-on'); 
    $(this).nextAll().removeClass('rating-star-on'); 
    }); 
    $(".rating-star").hover(function(){ 
    $(this).prevAll().andSelf().addClass('rating-star-on'); 
    $(this).nextAll().removeClass('rating-star-on'); 
    }); 
    $(".rating-star").mouseout(function(){ 
    $(".rating-star").removeClass('rating-star-on'); 
    }); 
});

http://jsfiddle.net/piyush_dezi/a67gv2o7/

在此先感謝您的幫助。

來源

2015-10-25 shiv

問題或問題是？ – charlietfl

添加簡單的if else語句點擊鼠標 –

一種方法是另一個類selected添加到您的CSS規則

.rating-star-on, 
.rating-star-selected 
    {background:#000 url(star-on.svg) no-repeat;}

並更改點擊處理程序來添加這個選擇的類。

$(".rating-star").click(function(e){ 
    $(this).prevAll().andSelf().addClass('rating-star-selected'); 
    $(this).nextAll().removeClass('rating-star-on'); 
});

你可能會需要的，如果你想用戶能夠改變他們的評價也

DEMO

來源

2015-10-25 14:03:39 charlietfl

非常感謝您的建議charlietfl它的工作現在。 – shiv

首先點擊事件添加類突出的明星做一些調整在鼠標移出事件後，移除這些類。在鼠標點擊事件中，解除鼠標移出事件，以便它不會從星星中刪除類。此外，而不是使用匿名鼠標功能使用名稱功能，所以你可以再次綁定它的其他開始。

$(function(){ 
$(".rating-star").mouseout(mouseOutFunction); 

function mouseOutFunction(){ 
$(".rating-star").removeClass('rating-star-on'); 
} 


$(".rating-star").click(function(e){ 
$(this).prevAll().andSelf().addClass('rating-star-on'); 
$(this).nextAll().removeClass('rating-star-on'); 
$(".rating-star").bind("mouseout", mouseOutFunction); 
$(this).unbind("mouseout"); 
}); 

$(".rating-star").mouseenter(function(){ 

    $(this).prevAll().andSelf().addClass('rating-star-on'); 
    $(this).nextAll().removeClass('rating-star-on'); 
}); 

});

來源

2015-10-25 14:05:45

該命令是絕對沒有意義的。事件發生的順序很重要，而不是你指定的順序 – charlietfl

我在這裏發現了真正的問題，第一個功能在這段代碼中不起作用。他有點擊功能，它不工作。我最終移動了這個功能，現在懸停功能不起作用。 –

好吧..我明白了爲什麼......只有一個函數參數給出時，'hover'單個回調會觸發'enter'和'leave'。所以你的訂單正在修復它，但只是因爲OP選擇不好的事件。實際上有2類鼠標鼠標變化發生 – charlietfl

加入這行CSS：

.rating-star-hover {background:#000 url(star-on.svg) no-repeat;}

更新JS：

$(this).prevAll().andSelf().removeClass('rating-star-off').addClass('rating-star-on'); 
$(this).nextAll().removeClass('rating-star-on'); 
}); 

$(".rating-star").hover(function(){ 
    $(this).prevAll().andSelf().addClass('rating-star-hover'); 
    $(this).nextAll().removeClass('rating-star-on'); 
}); 

$(".rating-star").mouseout(function(){ 
    $(".rating-star").removeClass('rating-star-hover'); 
});

來源

2015-10-25 14:06:51

爲什麼它沒有得到執行的原因是，當我們在DIV上單擊，評級上類被添加，但隨着我們鼠標移出類被刪除。所以評級不會改變。你也可以使用布爾變量來做到這一點。選中此項：

`http://jsfiddle.net/bandhavya/we3mx6vt/`

來源

2015-10-25 14:22:28 vbharath

爲什麼你不使用jquery評級插件？在網絡上有很多選項。像raty.check這個網址：Rating Plugins Raty是我使用過的最好的之一。

來源

2015-10-25 15:50:47

Jquery的星級評分

回答

相關問題