javascript - 使用 Select Option 下拉菜单的 jQuery Multiple Star Rating 系统

Question

我找到了这个我想使用的简单 jQuery 星级评分系统，我正在关注 http://jsfiddle.net/我网站上的代码，它适用于一个星级评分系统，但不适用于多个星级评分系统，而且我网站的一个页面上有多个星级评分系统。

这是 jsfiddle 链接:http://jsfiddle.net/IrvinDominin/eeG86/

<select name="my_input" id="rating_simple">
                    <option value="0" selected="selected">---Select---</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>

 <select name="my_input" id="rating_simple">
                    <option value="0" selected="selected">---Select---</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>

 <select name="my_input" id="rating_simple">
                    <option value="0" selected="selected">---Select---</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>

在上面的链接中，我喜欢 jQuery 下拉菜单，但这仅适用于一页上的一个评级系统。我的问题是我在一个页面上有多个星级评级系统。

Answer 1

您的第一个问题是您正在使用 ID，让我们为每个 select 更改您的标记以使用一个类:

<select name="my_input" class="rating_simple">

现在我们需要更新您的 jQuery 以反射(reflect)更改(使用 . 而不是 #)。

最后，在您的change 方法中，您使用$(".webwidget_rating_simple") 引用星级评分系统，但现在我们在 DOM 中有多个这样的元素，因此我们需要使用 $(this).next(".webwidget_rating_simple") 引用与您正在更改的当前 select 相邻的那个。

最后，您的 jQuery 将如下所示:

编辑 我们实际上需要单独设置每个下拉菜单，这是为了防止插件中的问题，如果您单击一颗星，将选择所有下拉菜单(最好更改调用代码而不是就是更新插件)。

$(".rating_simple").each(function () {
    $(this).webwidget_rating_simple({
        rating_star_length: '5',
        rating_initial_value: '',
        rating_function_name: ''
    });
 });

$('.rating_simple').change(function () {
    $(this).next(".webwidget_rating_simple").children("li").css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)');
    $(this).next(".webwidget_rating_simple").children("li").slice(0,this.value).css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)');
});

DEMO