jQuery Star Rating 使用 Select Option 下拉菜单答案

【问题标题】：jQuery Star Rating using Select Option dropdownjQuery Star Rating 使用 Select Option 下拉菜单
【发布时间】：2014-12-08 16:33:56
【问题描述】：

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

我发现我想使用这个简单的 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/'
    });
});

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

【问题讨论】：

你能把一个jsFiddle放在一起吗？
更正您的 html 结构。你没有把下拉菜单放在正文部分。
这里是一个 jsFiddle jsfiddle.net/JHWebDesigner/F7bjH 唯一的问题是 jsFiddle 上的星星没有出现...查看上面的演示链接，您可以看到更多的实际操作。
@JonathanHollins 查看我的答案，添加了一个工作小提琴（更改了脚本代码以查看星星，根据您的需要进行更改）
有much better solutions 用于简单的星级评分。查看this fiddle 以获取raty 的快速示例。

标签： jquery

【解决方案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/

重要提示：为了让fiddle正常工作，我改了脚本代码看星星，根据你的需要改代码

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

【讨论】：

Edward You ROCK！...哈哈.. 非常感谢！...我尝试了类似于您所写的内容，但不知何故我得到了多颗星...哈哈。再次感谢！

【解决方案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/

【讨论】：

【解决方案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/

为测试添加了背景颜色

【讨论】：