首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >替代jquery评级插件?

替代jquery评级插件?
EN

Stack Overflow用户
提问于 2011-04-18 21:16:51
回答 1查看 953关注 0票数 1

标题不太能说明问题,但我会尽力解释。

我正在寻找一个jquery评级插件,它的行为像一个标准的星级,但支持不同的图像和颜色取决于选定的值

例如,规模为1-10:

  • 当悬停或选择时,所有图像/颜色都是红色的。
  • 4-7在悬停或选择时,所有图像/颜色都是黄色的。
  • 8-10当悬停或选择时,所有图像/颜色都是绿色的。

我找到了。但他们不像我想要的那样。

因此,如果有人知道,如果有什么东西存在,将节省我大量的时间来创建一个新的插件。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-04-18 21:35:07

为什么不自己做呢?我已经构建了一个小演示来展示它是可能的:http://jsfiddle.net/s2zPW/18/

代码也没有那么难:

HTML:

代码语言:javascript
运行
复制
<ul class="rating"></ul>

JavaScript:

代码语言:javascript
运行
复制
$.fn.reverse = function() {
    return this.pushStack(this.get().reverse(), arguments);
};

// create two new functions: prevALL and nextALL. they're very similar, hence this style.
$.each(['prev', 'next'], function(unusedIndex, name) {
    $.fn[name + 'ALL'] = function(matchExpr) {
        // get all the elements in the body, including the body.
        var $all = $('body').find('*').andSelf();

        // slice the $all object according to which way we're looking
        $all = (name == 'prev') ? $all.slice(0, $all.index(this)).reverse() : $all.slice($all.index(this) + 1);
        // filter the matches if specified
        if (matchExpr) $all = $all.filter(matchExpr);
        return $all;
    };
});

for (var i = 0; i < 10; i++) {
    $('.rating').append('<li>' + i + '</li>');
}

$('.rating li').hover(function() {
    if ($(this).index() < 2) {
        $(this).prevALL('li').css('background-color', 'rgb(255, 160, 160)');
    } else if ($(this).index() < 4) {
        $(this).prevALL('li').css('background-color', 'rgb(255, 200, 200)');
    } else if ($(this).index() < 7) {
        $(this).prevALL('li').css('background-color', 'rgb(235, 220, 200)');
    } else if ($(this).index() < 10) {
        $(this).prevALL('li').css('background-color', 'rgb(200, 255, 200)');
    }
}, function() {
    $(this).parent().children().css('background-color', 'rgb(200, 200, 200)');
});
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5709020

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档