将rateit jquery插件应用于选择框

时间:2023-01-14 11:04:12

I have the following select form element, and I want to apply the rateit jquery plugin to it.

我有以下select表单元素,我想将rateit jquery插件应用于它。

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

and I am trying to apply the plugin using $("select.test").rateit();, but despite fireQuery showing data attached the the select element that, no effect is made and I am still left with a select box, and not a line of stars.

我试图使用$(“select.test”)。rateit();来尝试应用插件,但是尽管fireQuery显示数据附加了select元素,没有效果,我仍然留下一个选择框,并且不是一线明星。

EDIT

编辑

CSS File is included

包含CSS文件

Here is the page in question

这是有问题的页面

1 个解决方案

#1


2  

You're using the plugin wrong. See very simple example: http://jsfiddle.net/rudiedirkx/ZuJ2k/

你使用的插件错了。看到一个非常简单的例子:http://jsfiddle.net/rudiedirkx/ZuJ2k/

The select has to be there, but you still have to reference the div when you call the plugin: $('div#rating2').rateit();

select必须在那里,但是你在调用插件时仍然需要引用div:$('div#rating2')。rateit();

The div then has a reference to the select with a data attribute: data-rateit-backingfld="select#Rating"

然后div使用data属性引用select:data-rateit-backingfld =“select#rating”

edit
Actually it looks like you're not using the plugin at all? Where do you call the plugin?

编辑实际上看起来你根本就没有使用插件?你在哪里打电话给插件?

edit
This is your code:

编辑这是你的代码:

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

On the last line, you reference div#rateit, but that div doesn't exist. You just created a div.rateit, not a div#rateit. Change either of those to the other, and it should work. I'd keep the # because that's slightly faster (but you'd have to be sure there's only one of these rateit dropdowns on a page).

在最后一行,您引用div#rateit,但该div不存在。你刚刚创建了一个div.rateit,而不是div#rateit。将其中任何一个更改为另一个,它应该工作。我保留#,因为它稍微快一点(但你必须确定页面上只有一个这样的速率下拉菜单)。

So the new first line:

所以新的第一行:

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

edit
Also, you can test it before you change any code. Just open your Javascript console (Firebug in FF or Developer tools in Chrome) and type: jQuery('div.rateit').rateit();

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

#1


2  

You're using the plugin wrong. See very simple example: http://jsfiddle.net/rudiedirkx/ZuJ2k/

你使用的插件错了。看到一个非常简单的例子:http://jsfiddle.net/rudiedirkx/ZuJ2k/

The select has to be there, but you still have to reference the div when you call the plugin: $('div#rating2').rateit();

select必须在那里,但是你在调用插件时仍然需要引用div:$('div#rating2')。rateit();

The div then has a reference to the select with a data attribute: data-rateit-backingfld="select#Rating"

然后div使用data属性引用select:data-rateit-backingfld =“select#rating”

edit
Actually it looks like you're not using the plugin at all? Where do you call the plugin?

编辑实际上看起来你根本就没有使用插件?你在哪里打电话给插件?

edit
This is your code:

编辑这是你的代码:

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

On the last line, you reference div#rateit, but that div doesn't exist. You just created a div.rateit, not a div#rateit. Change either of those to the other, and it should work. I'd keep the # because that's slightly faster (but you'd have to be sure there's only one of these rateit dropdowns on a page).

在最后一行,您引用div#rateit,但该div不存在。你刚刚创建了一个div.rateit,而不是div#rateit。将其中任何一个更改为另一个,它应该工作。我保留#,因为它稍微快一点(但你必须确定页面上只有一个这样的速率下拉菜单)。

So the new first line:

所以新的第一行:

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

edit
Also, you can test it before you change any code. Just open your Javascript console (Firebug in FF or Developer tools in Chrome) and type: jQuery('div.rateit').rateit();

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