我正在尝试为文章实现星级评分系统并找到 this不错的插件。我已经用我自己的星星交换了默认的 star.gif。如果我使用全星级,一切正常。当我尝试使用 split 星功能时,星星不再正确显示。
星星本身的宽度为 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”循环中。我已经用 Firebug 对此进行了调试,计算似乎是正确的。每个第二颗星的左边距应为 -16 像素。 出于某种原因,这并没有显示在网站上。
有谁知道我做错了什么?我不得不说,我对 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;
}
最佳答案
我真的不知道这里出了什么问题。首先必须调整此设置中的宽度。那么人们可能想要摆脱 float 选项,而是在显示器上使用内联 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;
}
如果我用 Firebug 改变了这个值,什么也没有发生。我用原始文件替换了 css,然后再次添加了我需要的更改,瞧,现在一切看起来都不错。
关于javascript - Fyneworks jQuery 星级评分插件 - 一半评分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28457204/