使用jQuery将评级总额更新为%

好的，我们正在制作一个评级脚本，事实上，它都能工作

代码分为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>

住房负担能力

很穷
贫穷的
还不错
公平的
平均值
几乎
好
很好
杰出的
完美的

以上是一个问题。或“抱歉”一级，如下所示：

现在，用户选择他们认为该问题能够负担的星级数量，因此在本例中，用户选择了8颗星作为住房负担能力

这附加了4.0的数据成本

因为我们有20个问题，数学是这样的：

20个问题=100%的最高评分。（如果用户都是10星。）

因此，每个问题的分值为总分的5%，因为每个评分中有10颗星，每个星的分值为0.5%

因此，在这种情况下，8星级以上的评级=4%

我想要实现的是

当用户浏览这些问题时，我们有一个固定的div，它会更新当前的评分%

像这样：

我需要做jQuery的一些帮助

我需要将问题1中当前的选择回传到Your Rating:元素中

并在我们进行时更新它，因此如果用户对下一项评分为8星，则评分显示为8% 并在页面上更新，因为他们通过评级

为了保持整洁，我将评级页面拆分为4页，并使用back和next对评级页面进行分页，从1页到4页

显然，我们需要在进行过程中添加验证，但想知道是否有人知道我想要实现的方法

我读过关于（道具）方法的书，但我感到困惑

谢谢你的帮助

澄清：

数据成本在其他任何地方都没有使用，它只是我在计算过程中添加的东西

更新：

演示设置

---

问题似乎是每个评级都隐藏在一个兄弟div中。

编辑：现在使用唯一ID

试试这样的

---

供日后参考。如果链接断了。查一下加比的密码。几乎完全一样。

编辑：现在使用唯一ID

试试这样的

---

供日后参考。如果链接断了。查一下加比的密码。这几乎完全一样。

此函数将计算当前页面上您的评级，使每个星星值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+'%');
});

---

此函数将为您计算当前页面上的评级，使每个星星值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+'%');
});

---

由于您具有

数据成本

属性，因此可以执行此操作

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

在某个元素上用

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

将所有这些绑定到单选按钮单击事件，即可设置

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

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

工作演示

---

更新

如果您不使用

数据成本

属性，就像您的实时示例中的情况一样，那么您可以使用星组中单选按钮的索引（在本例中为其父标签）

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

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

---

在

演示由于您具有数据成本属性，因此可以执行此操作

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

在某个元素上用

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

将所有这些绑定到单选按钮单击事件，即可设置

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

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

工作演示

---

更新

如果您不使用

数据成本

属性，就像您的实时示例中的情况一样，那么您可以使用星组中单选按钮的索引（在本例中为其父标签）

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

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

---

---

在

演示我知道，但这对这个例子来说并不重要。当它把

搞砸了，我不能正确地选择单选按钮时，它就会出现。这也是一个不好的例子，设置为OP的人可能没有意识到你在代码中故意留下了这个错误（这会导致HTML无效）。正如@Tomalak所说，每个问题都有唯一的ID。@Tomalak-Geret'kal：我认为这是一个明显的错误，但你是对的，可能不是每个人都会这样。我更新了我答案中的链接。请在链接之外的地方发布代码。指向外部网站的链接往往会腐烂，这将使您的答案对将来通过搜索找到答案的人毫无用处。我知道，但这对本例来说并不重要。当它弄乱了

并且我无法正确选择单选按钮时，就会发生这种情况。这也是一个不好的例子，设置为OP的人可能没有意识到你在代码中故意留下了这个错误（这会导致HTML无效）。正如@Tomalak所说，每个问题都有唯一的ID。@Tomalak-Geret'kal：我认为这是一个明显的错误，但你是对的，可能不是每个人都会这样。我更新了我答案中的链接。请在链接之外的地方发布代码。指向外部站点的链接往往会腐烂，这将使您的答案对将来通过搜索找到答案的人毫无用处。嘿，Paul，我会尝试一下。为了澄清这一点，match函数返回一个与提供的正则表达式匹配的元素数组，您正在提取评级或ID？聪明：）用示例代码更新了问题，似乎。。。我们有一个问题Houston Hey Paul将对此进行讨论。为了澄清这一点，match函数返回一个元素数组，这些元素与提供的正则表达式相匹配，您要提取评级还是ID？聪明：）用示例代码更新了问题，似乎。。。我们有一个问题houston哈哈，伟大的人都这么想。检查我答案中的链接；-）谢谢，有更新的问题。看起来，这个问题源于我们使用的评级系统。@Ewout，咯咯笑。。但是我把

%

符号放在评级之后（在小提琴中）：P你们能看看你们能不能用这个代码工作吗@422，您的示例没有使用

数据成本

属性。有关使用索引的解决方案，请参见此