Fyneworks jQuery Star Rating Plugin - 一半评级答案

【问题标题】：Fyneworks jQuery Star Rating Plugin - half ratingsFyneworks jQuery Star Rating Plugin - 一半评级
【发布时间】：2015-02-17 18:08:47
【问题描述】：

我正在尝试为文章实施星级评分系统，并找到了 this 不错的插件。我已经用我自己的星星交换了默认的 star.gif。如果我使用完整的星级评分，一切正常。一旦我尝试使用拆分星功能，星星就不再正确显示。

星星本身的宽度为 32px。

半星应该在全星的右侧。

以下 if 子句似乎负责计算位置：

// Prepare division control
if(typeof control.split=='number' && control.split>0){
    var stw = ($.fn.width ? star.width() : 0) || control.starWidth;
    var spi = (control.count % control.split), spw = Math.floor(stw/control.split);
    star
    // restrict star's width and hide overflow (already in CSS)
    .width(spw)
    // move the star left by using a negative margin
    // this is work-around to IE's stupid box model (position:relative doesn't work)
    .find('a').css({ 'margin-left':'-'+ (spi*spw) +'px' })
};

它嵌入在“for-each star”循环中。我已经用萤火虫调试了这个，计算似乎是正确的。每个第二颗星的左边距应该是 -16px。但由于某种原因，这并未显示在网站上。

有谁知道我做错了什么？不得不提的是，我对 JS 的经验并不多。

这是css：

div.rating-cancel, div.star-rating {
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    float: left;
    height: 32px;
    overflow: hidden;
    text-indent: -999em;
    width: 17px;
}

div.rating-cancel, div.rating-cancel a {
    background: url("delete.gif") no-repeat scroll 0 -16px rgba(0, 0, 0, 0);
}

div.star-rating, div.star-rating a {
    background: url("star.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}

div.rating-cancel a, div.star-rating a {
    background-position: 0 0;
    border: 0 none;
    display: block;
    height: 100%;
    width: 32px;
}

div.star-rating-on a {
    background-position: 0 -32px !important;
}

div.star-rating-hover a {
    background-position: 0 -64px;
}

div.star-rating-readonly a {
    cursor: default !important;
}

div.star-rating {
    background: none repeat scroll 0 0 transparent !important;
    overflow: hidden !important;
}

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

我真的不知道这里出了什么问题。首先必须调整此设置中的宽度。然后人们可能想要摆脱浮动选项并在显示器上使用 inline-block 。这样，以下组件将在新行中绘制。

div.rating-cancel, div.star-rating {
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: inline-block;
    height: 32px;
    overflow: hidden;
    text-indent: -999em;
    width: 32px;
}

如果我用萤火虫改变了这个值，什么都没有发生。我用原始文件替换了 css，然后再次添加了我需要的更改，瞧，现在一切看起来都不错。

【讨论】：