3

我需要一点帮助......过去几个小时一直试图解决这个问题，但无处可去。

我发现我想使用这个简单的 jQuery Star 评级系统，原始编码使用 INPUT 字段，但我将其更改为与 Select Option Dropdown 一起使用。当它显示在左侧时，您有下拉菜单，而在右侧，您有默认的 STARS。现在，当您单击 STARS 时，下拉选项会发生变化...这很好，我想保留那部分，但是当您使用实际的下拉菜单时，星星不会改变...这是编码...

<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/'
    });
});

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

4

3 回答 3

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

于 2013-05-23T06:46:31.040 回答
0

你也可以试试这个——

$('#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/

于 2013-05-23T07:01:28.407 回答
0

我修改了不听选择更改的插件：

(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/

添加了用于测试的背景颜色

于 2013-05-23T07:12:18.947 回答