使用jQuery进行星级评分控制

我们新发行的《 jQuery：Ninja的新手》一书包含了许多出色的即用型解决方案，并随着您的进步教您jQuery的基本概念和更高级的概念。 作为品尝者，这里有一段摘录，其中Craig Sharkie向我们展示了如何使用jQuery构建强大，完善的星级评分小部件。 它可以通过键盘访问，并且可以进行半星评级。

如果您以前从未使用过jQuery，请获取免费的样本PDF，并快速了解第2章的介绍。下载的内容还包括第7章。离线学习本教程，您可以在闲暇时这样做。

您可以在此处获得本文的示例代码档案。

星级评定控制

我们的客户希望增加用户参与度，并帮助他的用户感到重要。 我们对此进行了思考，然后给他一个星级评价的想法-毕竟，人们只喜欢通过分配金星来表达自己的感受。 我们闪亮的新控件将出现， 如图1“星级评定控件”所示 。

图1.星级评定控件

我们进行星级评分控制的基础是单选按钮组； 这是完美的，因为浏览器会强制执行该组中的一个选择。 您只需添加正确数量的按钮，即可选择希望用户选择的范围：

例子1. chapter_07/11_star_ratings/index.html （节选）

<div class="stars">  <label><input id="rating-1" name="rating" type="radio" value="1"/>1 Star</label>  <label><input id="rating-2" name="rating" type="radio" value="2"/>2 Stars</label>  <label><input id="rating-3" name="rating" type="radio" value="3"/>3 Stars</label>  <label><input id="rating-4" name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

当然，最困难的部分是用我们的星形控件替换这些单选按钮。 您可以尝试仅使用CSS来设计HTML控件的样式，但是如果将控件分为两部分，它将变得更加容易和灵活得多：存储数据的基础模型和带有星星的闪亮视图。 在这种情况下，模型是原始的HTML单选按钮组。 我们的攻击计划是隐藏单选按钮，并显示我们通过jQuery添加的链接列表，其样式类似于星星。 与链接互动将切换选定的单选按钮。 没有JavaScript的用户将自己看到单选按钮，对我们来说这很好。

对于星星，我们将依靠CSS精灵。 这样，我们的控件将仅依赖于单个图像（如图2所示，“ Star CSS sprite image” ），它节省了HTTP请求，并使我们的图形设计师更容易编辑。

图2. Star CSS Sprite图像

我们的CSS会将CSS Sprite图像应用于我们创建的代表半星的链接。 要在不同的图像状态之间移动，我们只需要更新background-position属性即可：

例子2. chapter_07/11_star_ratings/stars.css （节选）

.stars div a {  background: transparent url(sprite_rate.png) 0 0 no-repeat;  display: inline-block;  height: 23px;  width: 12px;  text-indent: -999em;  overflow: hidden;}.stars a.rating-right {  background-position: 0 -23px;  padding-right: 6px;}.stars a.rating-over { background-position: 0 -46px; }.stars a.rating-over.rating-right { background-position: 0 -69px; }.stars a.rating { background-position: 0 -92px; }.stars a.rating.rating-right { background-position: 0 -115px; }

我们决定让用户从四颗星中选择评级，而不是通常的五颗星。 为什么？ 用户心理！ 给一个人一条中间道路，他们会走的。 通过没有中间立场，我们使用户对他们的选择有了更多的思考。 我们会取得更好的结果，并且能够更好地向用户展示最佳内容（由他们选择）！

但是只有四个等级是有限的，这就是为什么我们要允许半星评级。 这是通过视觉上的错觉实现的-您可能已经注意到，我们的恒星图像被切成了两半。 我们的HTML将包含八个单选按钮，每个按钮将价值半颗星。 将我们的八个单选按钮转换为四颗星的代码分为两部分。 首先， createStars函数将使用带有单选按钮的容器并将其替换为星形链接。 然后，将为每个星星添加适当的事件处理程序（在addHandlers方法中），以使用户与控件进行交互。 这是我们starRating对象的骨架：

例子3. chapter_07/11_star_ratings/script.js （节选）

var starRating = {  create: function(selector) {    $(selector).each(function() {      // Hide radio buttons and add star links    });  },  addHandlers: function(item) {    $(item).click(function(e) {      // Handle star click    })    .hover(function() {      // Handle star hover over    },function() {      // Handle star hover out    });  }}

create方法遍历每个与我们传入的选择器匹配的容器，并创建一个链接列表，这些链接充当单选按钮的代理。 这些链接是我们将看起来像星星的样式。 它还会隐藏原始的表单元素，因此用户只能看到我们可爱的星星：

例子4. chapter_07/11_star_ratings/script.js （节选）

$(selector).each(function() {  var $list = $('<div></div>');  // loop over every radio button in each container  $(this)    .find('input:radio')    .each(function(i) {      var rating = $(this).parent().text();      var $item = $('<a href="#"></a>')        .attr('title', rating)        .addClass(i % 2 == 1 ? 'rating-right' : '')        .text(rating);            starRating.addHandlers($item);      $list.append($item);            if ($(this).is(':checked')) {        $item.prevAll().andSelf().addClass('rating');      }    });

我们首先为新链接创建一个容器（一个div元素）； 我们将为要替换的每个单选按钮创建一个新链接。 在使用:radio选择器过滤器选择所有单选按钮后，我们将对每个项目进行评级，并使用它来创建超链接元素。

注意：带模量的条件分配

对于addClass动作，我们基于一点数学，使用三元运算符有条件地指定类名称。 就像我们在本书前面所做的那样，我们使用模数（ % ）运算符来确定索引是偶数还是奇数。 如果索引为奇数，我们将添加rating-right class ； 这使链接看起来像星形的右侧。

链接准备好后，我们将其传递给addHandlers方法-在这里我们将附加它需要工作的事件。 然后，将其附加到列表容器。 将其放入容器后，我们将查看是否选中了当前单选按钮（我们使用:checked表单过滤器）。 如果已选中，我们希望将rating class添加到该半星级以及之前的所有半星级。 任何附加了rating class链接都将被分配为金星图像（允许用户查看当前评分）。

为了选择我们需要变黄金的所有元素，我们将寻求几个新的jQuery动作的帮助： prevAll和andSelf 。 prevAll操作会选择当前选择之前的每个同级（不同于prev操作，后者仅选择紧接的前一个同级）。 对于我们的示例，我们想将class添加到先前的同级和当前选择中。 为此，我们应用andSelf动作，该动作仅将原始选择包括在当前选择中。 现在，我们拥有了所有将成为黄金的链接，因此我们可以添加class 。

提示：其他遍历方法

您可能已经猜到了，jQuery与prevAll一起为我们提供了nextAll方法， 该方法nextAll 元素之后在同一个容器中出现的所有同级元素。 jQuery 1.4还引入了两个新的伴随方法： prevUntil 和nextUntil 。 这些通过选择器调用，并将扫描元素的同级兄弟（向前或向后，取决于您使用的是哪个兄弟姐妹），直到它们碰到与选择器匹配的元素。

因此，例如， $('h2:first').nextUntil('h2'); 会给你所有的第一间坐在元素h2在页面上，下面h2在同一个容器元素。

如果将第二个参数传递给prevUntil或nextUntil ，它将用作选择器以过滤返回的元素。 因此，例如，如果我们编写了nextUntil('h2', 'div') ，它将仅返回当前选择和下一个h2之间的div元素。

完成所有这些艰苦的工作之后，我们现在可以将新的链接列表添加到控件中，并摆脱原始的按钮。 现在，用户将仅与星星互动：

例子5. chapter_07/11_star_ratings/script.js （节选）

// Hide the original radio buttons$(this).append($list).find('input:radio').hide();

该控件看起来正在形成，但是它什么也没做。 我们需要附加一些事件处理程序并添加一些行为。 我们对三个事件感兴趣。 当用户将鼠标悬停在星星上时，我们想更新CSS精灵以显示悬停状态； 当它们移开时，我们想将CSS Sprite还原为原始状态； 当他们单击时，我们要将选择项设为金色：

例子6. chapter_07/11_star_ratings/script.js （节选）

$(item).click(function(e) {  // React to star click}).hover(function() {  $(this).prevAll().andSelf().addClass('rating-over');},function() {  $(this).siblings().andSelf().removeClass('rating-over');});

hover功能是最简单的：悬停时，我们选择之前的所有半星（包括当前的半星），并使用prevAll和andSelf为他们rating-over class ，就像我们在设置中所做的那样。 悬停时，我们会覆盖所有基础，并从所有链接中删除rating-over等级。 徘徊照顾。

现在点击：

例子7. chapter_07/11_star_ratings/script.js （节选）

// Handle Star clickvar $star = $(this);var $allLinks = $(this).parent();// Set the radio button value $allLinks  .parent()  .find('input:radio[value=' + $star.text() + ']')  .attr('checked', true);  // Set the ratings$allLinks.children().removeClass('rating');$star.prevAll().andSelf().addClass('rating');// prevent default link clicke.preventDefault();

处理click事件的重要部分是更新基础单选按钮模型。 我们通过使用:radio过滤器和属性选择器选择正确的单选按钮来完成此操作，该选择器将搜索其值与当前链接的文本匹配的单选按钮。

更新模型后，我们可以回到处理CSS Sprite的方式了。 首先，我们从当前拥有class的所有链接中清除该rating ，然后将其添加到用户选择的rating上及之前的所有链接中。 最后一步是取消链接的默认操作，因此单击星号不会导致其触发位置更改。

结论

希望您喜欢jQuery：Ninja的新手中包含的所有jQuery优点。 记住要获取免费的样本PDF ，其中包含此示例以及150页的更优质的学习资料。 如果您已经售出，可以直接从SitePoint买书 。

From: https://www.sitepoint.com/jquery-star-rating/