Question

我在这里需要一些帮助......最后几个小时一直试图解决这个问题，并且无处可去。

我找到了这个简单的jQuery Star评级系统，我想使用它，原始编码使用INPUT字段，但我将其更改为与Select Option Dropdown一起使用。如果它显示在左侧，则显示下拉列表，右侧显示默认的STARS。现在，当你点击STARS时，下拉选项会改变......这是好的，我要保留的部分，但是当你使用实际的Dropdown时，星星不会改变......这里是编码......

<select name="my_input" id="rating_simple">
    <option value="0" selected="selected"></option>
    <option value="1">Poor</option>
    <option value="2">Below Average</option>
    <option value="3">Average</option>
    <option value="4">Good</option>
    <option value="5">Excellent</option>
</select>

的JavaScript

$(function() {
    $("#rating_simple").webwidget_rating_simple({
        rating_star_length: '5',
        rating_initial_value: '',
        rating_function_name: '',
        directory: 'rating-system/'
    });
});

谢谢！任何帮助将不胜感激！

Answer 1

我找不到任何内置函数来设置值;我编写了一个小脚本来处理使用change选择处理程序：

$('#rating_simple').change(function () {
    $(".webwidget_rating_simple > li").css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)')

    $(".webwidget_rating_simple > li").slice(0,this.value).css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)')

});

我设置为没有加星标的所有选项，然后将slice方法设置为加星标选择。

工作小提琴：http://jsfiddle.net/IrvinDominin/eeG86/

重要说明：为了让小提琴工作，我更改了脚本代码以查看星标，根据您的需要更改代码

为了完整性，我认为这是项目网站：http://www.loocasdance.pl/lib/ranking/rating.html

Answer 2

你也可以尝试这个 -

$('#rating_simple').change(function(){

        var rating = $(this).val();
        $('.webwidget_rating_simple li').css({
                'background-image' : 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)'
            });
        $('.webwidget_rating_simple li:lt('+rating+')').css({
                'background-image' : 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)'
            });

    });

jsFiddle - http://jsfiddle.net/Y4Nyu/

Answer 3

我修改了没有收听的插件选择更改：

(function (a) {
    a.fn.webwidget_rating_simple = function (p) {
        var p = p || {};
        var b = p && p.rating_star_length ? p.rating_star_length : "5";
        var c = p && p.rating_function_name ? p.rating_function_name : "";
        var e = p && p.rating_initial_value ? p.rating_initial_value : "";
        var d = p && p.directory ? p.directory : "images";
        var f = "";
        var g = a(this);
        b = parseInt(b);
        init();
        g.change(function(){var r = a(this).val()-1;f=""; g.next('ul').children('li').eq(r).trigger('mouseenter');f=r+1; g.next('ul').children('li').eq(r).trigger('mouseenter').trigger('mouseleave')});
        g.next("ul").children("li").hover(function () {
            $(this).parent().children("li").css('background-image', 'url(' + d + '/nst.gif)');
            var a = $(this).parent().children("li").index($(this));
            $(this).parent().children("li").slice(0, a + 1).css('background-image', 'url(' + d + '/sth.gif)');
        }, function () {});
        g.next("ul").children("li").click(function () {
            var a = $(this).parent().children("li").index($(this));
            f = a + 1;
            alert(f);
            g.val(f);
            if (c != "") {
                eval(c + "(" + g.val() + ")")
            }
        });
        g.next("ul").hover(function () {}, function () {
            if (f == "") {
                $(this).children("li").css('background-image', 'url(' + d + '/nst.gif)').css('background-color', '#0f0')
            } else {
                $(this).children("li").css('background-image', 'url(' + d + '/nst.gif)').css('background-color', '#0f0');
                $(this).children("li").slice(0, f).css('background-image', 'url(' + d + '/sth.gif)').css('background-color', '#f00')
            }
        });

        function init() {
            $('<div style="clear:both;"></div>').insertAfter(g);
            g.css("float", "left");
            var a = $("<ul>");
            a.attr("class", "webwidget_rating_simple");
            for (var i = 1; i <= b; i++) {
                a.append('<li style="background-image:url(' + d + '/nst.gif)"><span>' + i + '</span></li>')
            }
            a.insertAfter(g);
            if (e != "") {
                f = e;
                g.val(e);
                g.next("ul").children("li").slice(0, f).css('background-image', 'url(' + d + '/sth.gif)')
            }
        }
    }
})(jQuery);

$(function() {

    $("#rating_simple").webwidget_rating_simple({

    rating_star_length: '5',

    rating_initial_value: '',

    rating_function_name: '',

    directory: 'rating-system/'

    });

});

http://jsfiddle.net/F7bjH/5/

添加了测试背景颜色

使用选择选项下拉列表的jQuery星级评分

3 个答案: