Question

我发现这个简单的jQuery Star评级系统我想使用，我在我的网站上关注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以反映更改（使用.代替#）。

最后，在您的change方法中，您使用$(".webwidget_rating_simple")来引用星级评分系统，但现在我们在DOM中有多个这样的系统，所以我们需要使用select引用您正在更改的当前$(this).next(".webwidget_rating_simple")旁边的那个。

最后，你的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

Answer 2

试试这个。使用不同的ID和名称。

<select name="my_input1" id="rating_simple1">
                    <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_input2" id="rating_simple2">
                    <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_input2" id="rating_simple2">
                    <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 Option下拉列表的jQuery多星评级系统

2 个答案: