更新評級總評價使用jQuery的百分比

Question

好的，我們正在製作一個評級腳本，實際上它都有效。

該代碼分爲20個評分，我們要求用戶評分。他們有10個值。

代碼如下所示：

<div class="ctrlHolder"> 
<p class="label">Housing Affordability</p> 
<div class="multiField starify" id="question-1"> 
    <label for="vote-1_1" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_1" data-cost="0" value="Very Poor" /> Very Poor</label> 
    <label for="vote-1_2" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_2" data-cost="1.0" value="Poor" /> Poor</label> 
    <label for="vote-1_3" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_3" data-cost="1.5" value="Not that Bad" /> Not that Bad</label> 
    <label for="vote-1_4" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_4" data-cost="2.0" value="Fair" /> Fair</label> 
    <label for="vote-1_5" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_5" data-cost="2.5" value="Average" /> Average</label> 
    <label for="vote-1_6" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_6" data-cost="3.0" value="Almost" /> Almost</label> 
    <label for="vote-1_7" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_7" data-cost="3.5" value="Good" /> Good</label> 
    <label for="vote-1_8" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_8" data-cost="4.0" value="Very Good" /> Very Good</label> 
    <label for="vote-1_9" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_9" data-cost="4.5" value="Excellent" /> Excellent</label> 
    <label for="vote-1_10" class="blockLabel"><input type="radio" name="poll-1" id="vote-1_10" data-cost="5.0" value="Perfect" /> Perfect</label> 
</div> 

上面顯示1個問題。還是遺憾一個等級，這似乎是這樣的：

現在用戶選擇的明星，他們認爲這個問題得到的量，所以在這個例子中，用戶已經選擇了8分，爲住房支付能力。

這是附加的4.0

因爲我們有20個問題，一個數據的成本中，數學是像這樣：

20道題= 100％最高分的評價。 （如果用戶10星的一切。）

因此每題總分的5％，因爲有10位明星在每個等級，每個明星都有的1.5％

所以在這一個個人價值情況下，以上8星級= 4％

我想要什麼來實現的，是...

當用戶會突破我們有一個固定的股利，其中更新的額定電流％的問題

像這樣：

我需要的是一些幫助做jQuery。

我需要將來自問題1的當前選擇回顯到Your Ra​​ting：元素中。

並隨時更新，因此如果用戶對下一個項目評分爲8顆星，評分會顯示8％ 以及頁面更新時的評分。

爲了保持整潔，我將評分頁面分成了4份，我們使用上一頁和下一頁在評分頁面上進行分頁，第1頁到第4頁。

很顯然，我們需要添加驗證，因爲我們去，但如果有人知道的方法做我想要實現什麼想知道...

我曾讀過關於（丙）方法，但我越來越糊塗。

任何幫助表示讚賞，請。

澄清：

其他任何地方使用的數據的成本心不是，它只是我已經加入到做數學題，因爲我們去

UPDATE：

DEMO設置。 http://sitehelp.com.au/demos/starrating/demo7c.html

問題似乎是每個評級隱藏到兄弟分區。

Answer 1

編輯：現在唯一ID

嘗試是這樣的jsfiddle

以供將來參考。如果鏈接中斷。檢查Gaby的代碼。幾乎完全一樣。

Answer 2

該函數將計算評級您對當前頁對每顆恆星值0.5％：

function getRating(){ 
    var rating = 0; 
    $('input[id^="vote-"]:checked').each(function(){ 
     rating += $(this).attr('id').match(/vote-\d+_(\d+)/)[1]/2; 
     } 
    ); 
    return rating; 
} 

您可以使用上的改變事件的輸入，比如：

$('input[id^="vote-"]').change(function(){ 
    var rating = getRating(); 
    // Add in value from previous page 
    // Somewhere around here 
    $('#rating-display').text(rating+'%'); 
}); 

Answer 3

既然你有data-cost屬性，你可以做到這一點

var rating=0; 
$('.starify :checked').each(function(){ 
    rating += +$(this).data('cost'); 
}); 

和只是在http://jsfiddle.net/gaby/9767h/1/

---

與

$('someid').text(rating); 

領帶表明，該有的元素這一切的單選按鈕點擊事件，並且您設置..

$('.starify :radio').live('click', function(){ 
    var rating=0; 
    $('.starify :checked').each(function(){ 
     rating += +$(this).data('cost'); 
    }); 

    $('someid').text(rating); 
}); 

工作演示更新

如果您不使用data-cost屬性，就像您的實例中的情況一樣，那麼您可以使用星號組中的單選按鈕（或其父標籤，在本例中爲）的索引。

$('.starify :radio').live('click', function(){ 
    var rating=0; 
    $('.starify :checked').each(function(){ 
     rating += ($(this).parent().index()+1) * 0.5; 
    }); 

    $('#rating').text(rating + ' %'); 
}); 

演示在http://jsfiddle.net/gaby/7BAuk/