javascript - 将 rateit jquery 插件应用于选择框

Question

我有以下选择表单元素，我想应用 rateit jquery plugin

<select class="test" id="Rating" name="Rating">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

我正在尝试使用 $("select.test").rateit(); 应用插件，但尽管 fireQuery 显示数据附加到选择元素，但没有任何效果，并且我仍然只剩下一个选择框，而不是一行星星。

编辑

包含 CSS 文件

Here is the page in question

Answer 1

您使用的插件有误。请参阅非常简单的示例:http://jsfiddle.net/rudiedirkx/ZuJ2k/

select 必须存在，但调用插件时仍然需要引用 div:$('div#rating2')。 rateit();

然后 div 引用了带有数据属性的 select:data-rateit-backingfld="select#Rating"

编辑
实际上看起来您根本没有使用该插件？你在哪里调用插件？

编辑
这是您的代码:

rateItDiv = $('<div class="rateit" data-rateit-backingfld="#Rating"></div>');
$("div#ReviewInputZone select.test").after(rateItDiv);
$('div#rateit').rateit();

在最后一行，您引用了 div#rateit，但是 div 并不存在。您刚刚创建了一个 div.rateit，而不是 div#rateit。将其中一个更改为另一个，它应该可以工作。我会保留 #，因为这样会稍微快一些(但您必须确保页面上只有这些 rateit 下拉菜单之一)。

所以新的第一行:

rateItDiv = $('<div id="rateit" class="rateit" data-rateit-backingfld="#Rating"></div>');

编辑
此外，您可以在更改任何代码之前对其进行测试。只需打开您的 Javascript 控制台(FF 中的 Firebug 或 Chrome 中的开发者工具)并输入:jQuery('div.rateit').rateit();