javascript - jquery 替换输入，限制我们 - 变通？

Question

我们正在使用一个 jquery 星级评级脚本，这正是我们想要的。我们正在尝试创建一个与其一起工作的功能，但由于单选按钮被替换而无法正常工作？

这就是我们所拥有的:

这就是我们想要实现的:

基本上，我们正在尝试做的是创建一个功能，根据他们的选择更新百分比，一种“分数”类型的东西。如果我们去掉评级脚本，它会完美运行——因为它直接从单选按钮运行——但是当我们使用评级脚本时，单选按钮将被仅替换为 DIV。使用 firebug 检查时，我们看到以下内容:

<div class="ui-stars-star">
    <a title="">Average</a>
</div>

在纯 HTML 中，实际上是:

<label for="vote-19_5" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_5" value="Average" /> Average</label>

这是我们的代码:

评级示例:

<div class="ctrlHolder">
    <p class="label">Clean Green and Environmentally Friendly</p>
    <div class="multiField starify" id="question-19">
        <label for="vote-19_1" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_1" value="Very Poor" /> Very Poor</label>
        <label for="vote-19_2" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_2" value="Poor" /> Poor</label>
        <label for="vote-19_3" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_3" value="Not that Bad" /> Not that Bad</label>
        <label for="vote-19_4" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_4" value="Fair" /> Fair</label>
        <label for="vote-19_5" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_5" value="Average" /> Average</label>
        <label for="vote-19_6" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_6" value="Almost" /> Almost</label>
        <label for="vote-19_7" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_7" value="Good" /> Good</label>
        <label for="vote-19_8" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_8" value="Very Good" /> Very Good</label>
        <label for="vote-19_9" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_9" value="Excellent" /> Excellent</label>
        <label for="vote-19_10" class="blockLabel"><input type="radio" name="poll-19" id="vote-19_10" value="Perfect" /> Perfect</label>
    </div>
</div>

这是我们希望我们的功能去的地方:

Score: <div id="rating"></div>

这是我们创建功能的 JS:

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

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

我们只是想让我们的评分 % 功能与星级脚本兼容，因为星级脚本用 HTML 替换了单选按钮，这导致 score % JS 不起作用。如果我们去掉星级评定脚本，它就完美无缺了。 (如果需要，我也可以上传演示)。

我们甚至不介意在我们的 javascript 变量中设置，将每个单词定义为一个数值。

演示: http://sitehelp.com.au/demos/starrating/demo7c.html

如有任何帮助，我们将不胜感激。

Answer 1

这样的事情怎么样？...

$('.ui-stars-star').live('click', function(){
var rating=0;
$(this).parent().find(".ui-stars-star-on").each (function ()
{
  rating += ($(this).parent().index()+1) * 0.5;
});
alert(rating);

});

我们甚至可以通过删除循环使其变得更好:

$('.ui-stars-star').live('click', function(){
   var rating=0;

   rating = $(this).parent().find(".ui-stars-star-on").length * ($(this).parent().index()+1) * 0.5;

   alert(rating);

});