我正在制作一个简单的星级评分插件。但是我在这个插件中放置hover事件时遇到了问题。
jquery的，
(function($){
$.fn.extend({
rater: function(options) {
var defaults = {
}
var options = $.extend(defaults, options);
var o = options;
var $this = this;
$this.set_votes = function(object)
{
$(".replacement-radio",object).each(function(){
// Set variables.
var object = $(this);
var object_checked = object.attr('checked');
// Check if the object is checked.
if(object_checked === 'checked')
{
// Change stars.
$(this).next().prevAll('.button-star').andSelf().addClass('button-star-hover');
$(this).next().nextAll('.button-star').removeClass('button-star-hover');
}
});
}
$('.button-star').hover(
// Handles the mouseover.
function() {
$(this).prevAll('.button-star').andSelf().addClass('button-star-hover');
$(this).nextAll('.button-star').removeClass('button-star-hover');
},
// Handles the mouseout .
function() {
$(this).prevAll('.button-star').andSelf().removeClass('button-star-hover');
$this.set_votes($(this).parent());
}
);
// You must call return after declaring the functions.
return this.each(function() {
// Set the object.
var object = $(this);
//alert(object.html());
// Check if the object is present.
if(object.length > 0)
{
// Hide the object and add the star after it.
object.hide();
object.after('<span class="button-star"></span>');
// Attached click event to the button which created after the object.
$('.button-star').click(function(){
// Set the value into the radio button.
var $this_check = $(this).prev().attr('checked', true);
var $this_value = $(this).prev().val();
});
}
});
}
});
})(jQuery);
我不确定如何在插件中实际调用/使用hover事件。因此，下面的悬停事件在我的星级评分插件中不起作用，
$('.button-star').hover(
// Handles the mouseover.
function() {
$(this).prevAll('.button-star').andSelf().addClass('button-star-hover');
$(this).nextAll('.button-star').removeClass('button-star-hover');
},
// Handles the mouseout .
function() {
$(this).prevAll('.button-star').andSelf().removeClass('button-star-hover');
$this.set_votes($(this).parent());
}
);
这是jsfiddle link。
任何想法我应该如何让它发挥作用？
答案 0 :(得分：2)
我是这样做的：
$(document).ready(function() {
$(".replacement-radio").rater().binds();
});
(function($) {
$.fn.extend({
rater: function(options) {
var $this = this,
defaults = {},
options = $.extend(defaults, options);
$this.set_votes = function(object) {
$(".replacement-radio", object).each(function(i,elm) {
if ($(elm).prop('checked')) {
$(elm).next().prevAll('.button-star').andSelf().addClass('button-star-hover');
$(elm).next().nextAll('.button-star').removeClass('button-star-hover');
}
});
}
return this.each(function(i,elem) {
if ($(elem).length) {
$(elem).hide().after('<span class="button-star"></span>');
$('.button-star').on('click', function() {
var $this_check = $(this).prev().prop('checked', true),
$this_value = $(this).prev().val();
});
}
});
},
binds: function() {
$('.button-star').on({
mouseenter: function() {
$(this).prevAll('.button-star').andSelf().addClass('button-star-hover');
$(this).nextAll('.button-star').removeClass('button-star-hover');
},
mouseleave: function() {
$(this).prevAll('.button-star').andSelf().removeClass('button-star-hover');
$this.set_votes($(this).parent());
}
});
}
});
})(jQuery);
您似乎使用了许多不必要的变量，变量上的相同名称，即使它们位于不同的范围内，也会在同一主函数中混淆。
prop()也是checked的正确方法。
答案 1 :(得分：1)
我认为你需要等到所有的rater代码都被执行并且动态添加了类“button-star”，如果你在该函数中运行处理程序代码，那么这些类还没有，所以没有什么可以挂钩的处理程序。
关闭主题 ： 如果你的应用程序开始变得更大，可以看一下Backbone.js或Knockout.js，它们可以帮助我们使代码更加面向对象并且易于维护。
这是代码
$(document).ready(function(){
$(".replacement-radio").rater();
$(".replacement-radio").AttachHandlers();
});
(function($){
$.fn.extend({
rater: function(options) {
var defaults = {
}
var options = $.extend(defaults, options);
var o = options;
var $this = this;
$this.set_votes = function(object)
{
$(".replacement-radio",object).each(function(){
// Set variables.
var object = $(this);
var object_checked = object.attr('checked');
// Check if the object is checked.
if(object_checked === 'checked')
{
// Change stars.
$(this).next().prevAll('.button-star').andSelf().addClass('button-star-hover');
$(this).next().nextAll('.button-star').removeClass('button-star-hover');
}
});
}
// You must call return after declaring the functions.
return this.each(function() {
// Set the object.
var object = $(this);
//alert(object.html());
// Check if the object is present.
if(object.length > 0)
{
// Hide the object and add the star after it.
object.hide();
object.after('<span class="button-star"></span>');
// Attached click event to the button which created after the object.
$('.button-star').click(function(){
// Set the value into the radio button.
var $this_check = $(this).prev().attr('checked', true);
var $this_value = $(this).prev().val();
});
}
});
},
AttachHandlers: function(){
$('.button-star').hover(
// Handles the mouseover.
function() {
$(this).prevAll('.button-star').andSelf().addClass('button-star-hover');
$(this).nextAll('.button-star').removeClass('button-star-hover');
},
// Handles the mouseout .
function() {
$(this).prevAll('.button-star').andSelf().removeClass('button-star-hover');
$this.set_votes($(this).parent());
}
);
}
});
})(jQuery);
将它作为一个单独的函数来实现。
答案 2 :(得分：1)
您将悬停事件附加到不存在的元素 - 您在底部的return语句中创建button-star范围。
如果您更改事件处理程序以通过on()使用事件委派，则可以正常工作：
$(document).on('mouseenter', '.button-star', function() {
$(this).prevAll('.button-star').andSelf().addClass('button-star-hover');
$(this).nextAll('.button-star').removeClass('button-star-hover');
})
.on('mouseleave', '.button-star', function() {
$(this).prevAll('.button-star').andSelf().removeClass('button-star-hover');
$this.set_votes($(this).parent());
});