jQuery的评级系统

我试图从0做一个评级系统，到目前为止，我有两个类和关闭，总共有5星，jQuery的评级系统

这将显示该项目的等级，直到人悬停在他们，那么它会高亮显示以前的明星和隐藏的额定电流，

<div id="stars"> 
<div class="on"></div> 
<div class="on"></div> 
<div class="on"></div> 
<div class="off"></div> 
<div class="off"></div> 
</div>

的JS我走到这一步，

$('#stars').mouseover(function() { 
     $(this).children().prevAll().andSelf().attr('class', 'on'); 
    $(this).nextAll().attr('class', 'on'); 
    });

其中仅hilights全部启动，并打乱了一切，任何人可以帮忙吗？工作太多时间，只是不能得到它的工作..

谢谢！

来源

2011-08-10 Saulius Antanavicius

有用的评论。我正在寻找一个简单的解决方案，大部分我曾与无论是使用JS与图像或有大量的jQuery。 –

没有必要特别讽刺，因为你从来没有解释过你为什么要从头开始做这件事。 PPrice的评论确实很有帮助，因为它链接到一个功能齐全的插件，或者任何阅读此主题的人都可以直接使用。 – Sparky

如果你使用这个作为前点击预览，那么你可能需要使用悬停功能是这样的：

$('#stars .star').hover(
    function() { 
     $(this).prevAll().andSelf().addClass('on'); 
     $(this).nextAll().removeClass('on'); 
    }, 
    function() { 
     $(this).parent().children().removeClass('on'); 
    } 
);

，随着这个的jsfiddle的HTML飞到哪里，你可以看到它工作：http://jsfiddle.net/jfriend00/aRTzQ/

我也建议使用addClass()和removeClass()而不是直接操纵属性，因为它给你更多的灵活性，让对象上的其他类更具可读性。

要点击粘性，以便记住设置，可以使用如下所示：http://jsfiddle.net/jfriend00/QxADg/。相应的CSS/HTML在小提琴中。

$('#stars .star').hover(
    function() { 
     $(this).prevAll().andSelf().addClass('preview'); 
     $(this).nextAll().removeClass('preview'); 
    }, 
    function() { 
     $(this).parent().children().removeClass('preview'); 
    } 
); 

$('#stars .star').click(function() { 
    $(this).parent().children().removeClass('on'); 
    $(this).prevAll().andSelf().addClass('on'); 
}); 

$('#stars').hover(
    function() {$(this).addClass("inPreview");}, 
    function() {$(this).removeClass("inPreview");} 
);

来源

2011-08-10 22:29:34 jfriend00

这将工作得很完美，但他们已经有一个负载开或关的状态，有没有办法简单地修改这个工作呢？因为它们中的一些在悬停之前处于打开和关闭状态 –

您必须描述您希望如何更详细地工作。现在，这是“预览式”代码。它并不代表初始状态，也没有任何机制（例如点击）来锁定状态。你必须解释你想如何工作。 – jfriend00

嗨，对不起，如果你看到样品上下课，那么代码是如何加载的，取决于它有多少颗恒星，那么我希望用户能够随心所欲地执行你的代码不，如果他们不点击（我稍后将添加手柄），当用户将他的鼠标从星星移开时它会显示相同的加载状态，这有助于吗？谢谢！ –

这里有很多插件，比如一个PPrice链接。我同意其他人的看法，那就是更好的方式，除非他们因某种原因不满足您的需求。

如果你想使这个代码工作，或者如果你只是这样做的学习，也许这就是你想要做的？

您可以将鼠标悬停在“星星”（框）上以查看颜色变化。

http://jsfiddle.net/pW3Sn/

$('#stars > div').mouseover(function() { 
     $(this).prevAll().andSelf().attr('class', 'on'); 
     $(this).nextAll().attr('class', 'off'); 
});

来源

2011-08-10 22:18:57

我将如何设计out功能？就像我没有投票一样，我将鼠标移开了？ –

请参阅http://jsfiddle.net/pW3Sn/1/ –

为什么不使用别人的插件？例如http://www.fyneworks.com/jquery/star-rating/

来源

2011-08-10 22:20:57

其实你可以使用纯CSS来实现它。

HTML代码：

<div id="stars"> 
    <div class="star"> 
     <div class="star"> 
      <div class="star"> 
       <div class="star"> 
        <div class="star"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

和CSS：

#stars { 
    height: 16px; /* height of stars block */ 
} 
#stars .star { 
    height: 16px; /* height of one star */ 
    padding-left: 16px; /* width of one star */ 
    background-image: url('http://url.to.your.star.image'); 
    float: left; 
} 
#stars .star:hover, 
#stars .star :hover { 
    background-position: 0px -16px; /* toggle image */ 
}

工作的示例：http://jsfiddle.net/4CfzD/

来源

2011-08-11 22:23:49 Karolis

jQuery的评级系统

回答

相关问题